Layout - ویژگی width و max-width
استفاده از width, max-width و margin: auto;
همانطور که در فصل گذشته توضیح داده شد؛ یک عنصر سطح بلوک همیشه تمام عرض موجود در صفحه را در بر میگیرد (از جهات چپ و راست تا جایی که میتواند کشیده میشود)
تنظیم width
برای یک عنصر سطح بلوک از کشیده شدن آن تا لبههای ظرف خود (به انگلیسی: container) جلوگیری میکند. بنابراین،میتوانید مقدار حاشیه ها (margins) را روی auto تنظیم کنید، تا عنصر درون ظرف (container) خود به صورت افقی وسط چین شود. عنصر، عرض (به انگلیسی: width) تعیین شده را در برمی گیرد، و مقدار فضای باقیمانده بهطور مساوی بین دو حاشیه تقسیم خواهد شد:[۱]
عنصر <div> عرضی به اندازه 500px دارد، و حاشیه آن روی auto تنظیم شدهاست.
نکته: مشکل تگ <div>
زمانی رخ میدهد که پنجره مرورگر کوچکتر از عرض عنصر باشد. در این حالت مرورگر یک نوار پیمایش افقی به صفحه اضافه میکند.
استفاده از max-width
در این موقعیت به جای width، موجب بهبود عملکرد مرورگر در مدیریت پنجرههای کوچک میشود. این امر برای ساخت وبسایت قابل استفاده روی دستگاههای کوچک بسیار مهم است.
عنصر <div> حداکثر عرضی به اندازه 500px دارد، و حاشیه آن روی auto تنظیم شدهاست.
نکته: عرض پنجره مرورگر را به کمتر از 500px تغییر دهید، تا تفاوت بین دو div را ببینید!
در اینجا مثالی از هر دو div وجود دارد:
منابع آموزشی