آموزش ویژگی max-width در CSS

استفاده از ویژگی های width و max-width و margin:auto

همان طور که در مقاله ی قبلی گفته شد، یک عنصر بلوکی(block-level) تمام عرض در دسترس خود را اشغال می کند(تا جای امکان به سمت راست و چ کشیده می شود). تنظیم عرضِ(width) یک عنصر بلوکی، از کشیده شدن آن به سمت چپ و راست عنصر دربردارنده ی آن جلوگیری می کند. سپس، می توانیم margin ها را برابر با مقدار auto قرار دهیم تا این عنصر به صورت افقی(horizontally) در وسط(center) عنصر دربردارنده ی خود قرار گیرد. با انجام این کارها، عنصر مورد نظر یک عرض مشخص خواهد داشت و باقی فضاها، بین دو margin چپ و راست نصف می شوند.

اما اگر از ویژگی max-width استفاده کنیم، در این وضعیت، باعث می شود که مدیریت پنجره های کوچک، برای مرورگر بهبود پیدا کند. این وقتی مهم است که داریم یک سایت می سازیم که برای دستگاه های کوچک هم مناسب باشد.

نکته: سعی کنید این پنجره ی مرورگر را تغییر اندازه دهید تا عرضی کمتر از 500px داشته باشد، تا مشاهده کنید که این عنصر div و عنصر div بالایی چه تفاوتی دارند.  

در مثال زیر، دو عنصر div بالا، را مشاهده می کنید:

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

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