طرح‌بندی CSS - عرض و max-width

از width، max-width و margin: auto استفاده کنید;

همانطور که در فصل قبلی ذکر شد، بخش‌های بلوکی همیشه تمام عرض موجود را اشغال می‌کنند (تا حد امکان به سمت چپ و راست کشیده می‌شوند).

بخش‌های بلوکی عرض این کار جلوگیری می‌کند از آن که به لبه‌های محیط خود بپیچد. سپس می‌توانید حاشیه‌ها را به صورت auto تنظیم کنید تا عنصر در محیط خود به صورت افقی居انده شود. عنصر فضای مشخص شده را اشغال می‌کند و فضای باقی‌مانده به صورت مساوی بین دو حاشیه توزیع می‌شود:

عرض این عنصر <div> 500px است و حاشیه‌ها به صورت auto تنظیم شده‌اند.

توجه داشته باشید:وقتی که پنجره مرورگر کوچکتر از عرض عنصر باشد، این <div> مشکلی رخ می‌دهد. مرورگر یک نوار چرخش افقی به صفحه اضافه خواهد کرد.

در این حالت، استفاده از max-width این می‌تواند عملکرد مرورگر در پنجره‌های کوچک‌تر را بهبود بخشد. این نکته برای قابل استفاده بودن وب‌سایت در دستگاه‌های کوچک بسیار مهم است:

این عنصر <div> دارای حداقل عرض 500px و حاشیه‌های خودکار است.

توضیح:لطفاً اندازه پنجره مرورگر را به کمتر از 500 پیکسل تنظیم کنید تا تفاوت بین دو div را مشاهده کنید!

این مثال شامل دو div بالا است:

مثال

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
{}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
{}

آموزش عملی