در این مقاله در مورد width و max-width در css توضیحاتی ارائه می دهیم.
همان طور که در درس قبلی عنوان کردیم، یک عنصر block-level همیشه بیشترین عرض موجود را، اشغال می کند. (در حدی که امکان داشته باشد، به سمت چپ و راست امتداد می یابد)
وقتی برای یک المان block-level عرض تعریف می کنیم، مانع از این می شویم که این المان تمامی عرض المان دربرگیرنده خودش را اشغال کند.
پس از آن می توانیم مقدار margin آن را برابر auto قرار دهیم و المان را در جهت افقی در وسط المان دربرگیرنده قرار دهیم. با انجام این کار، المان در وسط قرار می گیرد و فضای باقی مانده، به طور مساوی در دو طرف آن اعمال می شود.
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
نکته: در این صورت، مشکل زمانی رخ می دهد که عرض پنجره مرورگر، کمتر از عرضی باشد که برای المان تعریف کرده ایم، در این حالت، مرورگر یک scrollbar افقی به صفحه اضاف می کند.
اگر به جای width از max-width استفاده کنیم، مواقعی که عرض پنجره مرورگر کوچک می شود، عرض المان نیز متناسب با آن تغییر می کند.
div.ex1 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
می توانید با کوچک کردن عرض مرورگر خود، تفاوت بین دو div بالا را مشاهده کنید.
ویژگی max-width در css برای وب سایت هایی که در دستگاه های کوچک باز می شوند، مناسب است.
برگرفته از وب سایت w3schools
دیدگاه بگذارید