آموزش ویژگی های height و width در CSS

از ویژگی های height و width برای تنظیم ارتفاع و عرض یک عنصر استفاده می شود. از ویژگی max-width برای تنظیم ماکزیمم عرضِ(maximum width) یک عنصر استفاده می شود.

تنظیم height و width در CSS
از ویژگی های height و width به ترتیب برای تنظیم ارتفاع و عرض یک عنصر استفاده می شود. ویژگی های height و width شامل padding و border ها یا margin ها نمی شود. این ویژگی ها، ارتفاع یا عرضِ ناحیه ی درونِ بخش های padding و border و margin از عنصر را تنظیم می کنند.

مقادیر height و width در CSS

ویژگی های height و width می توانند مقادیر زیر را داشته باشند:

• auto : این مقدار پیش فرض است. با تنظیم این مقدار، مرورگر height یا width را محاسبه می کند.
• length : این مقدار، مقدار height یا width را به واحدهای px یا cm یا غیره تعریف می کند.
• درصد(%): این مقدار، height و wicth را به صورت درصدی از بلوک دربردارنده تعریف می کند.
• initial : این مقدار، height و width را به مقدار پیش فرض خود، تنظیم می کند.
• inherit: با استفاده این مقدار، height یا width، از مقدار والد خود به ارث برده می شوند.

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

 نکته: به یاد داشته باشید که ویژگی های height و width شامل padding و border و margin نمی شوند. بلکه این ویژگی ها، ارتفاع و عرض ناحیه ی درونی padding و border و margin از عنصر را تنظیم می کنند.

تنظیم max-width

از ویژگی max-width برای تنظیم ماکزیمم عرضِ یک عنصر استفاده می شود. ویژگی max-width می تواند یک واحد طول مانند px یا غیره داشته باشد. یا می تواند به صورت درصد(%) بلوک دربردارنده ی خود مشخص شود یا می تواند برابر با none قرار گیرد(این مقدار none پیش فرض است و به معنی: بدون عرض ماکزیمم می باشد.

مشکل عنصر <div> در مثال شماره 2 در بالا، وقتی رخ می دهد که (عرض) پنجره ی مرورگر مشابه با عرض این عنصر(500px) باشد. با انجام این کار، مرورگر یک نوار اسکرول افقی در صفحه ایجاد می کند. اما اگر برای این عنصر، به جای width از ویژگی max-width استفاده کنیم، مشکل مرورگر برای پنجره ی های کوچک بهبود می یابد.
نکته: پنجره ی مرورگر خود را تغییر اندازه دهید تا عرض آن کمتر از 500px شود، تا تفاوت این عنصر div، عنصر div قبلی را مشاهده کنید:

 نکته: اگر به علتی هردوی ویژگی های width و max-width را روی یک عنصر تنظیم کردید، و مقدار ویژگی width بزرگتر از ویژگی max-width بود، ویژگی max-width مورد استفاده قرار خواهد گرفت(و ویژگی width نادیده گرفته خواهد شد.

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

مثال های خودتان امتحان کنید

تنظیم height و width از یک عنصر

این مثال نشان می دهد که چگونه می توانیم height و width عناصر مختلف را تنظیم کنیم.

تنظیم height و width از یک تصویر با استفاده از درصد

این مثال نشان می دهد که چگونه می توانیم height و width یک تصویر را با استفاده از درصد مشخص کنیم.

تنظیم min-width و max-width برای یک عنصر

این مثال نشان می دهد که چگونه می توانیم عرض مینیمم(minimum width) و عرض ماکزیمم(maximum width) را برای یک عنصر با استفاده از مقدار پیکسل مشخص کنیم.

تنظیم min-height و max-height برای یک عنصر

این مثال نشان می دهد که چگونه می توانیم مینیمم ارتفاع(minimum height) و ماکزیمم ارتفاع(maximum height) را با استفاده از مقدار پیکسل برای یک عنصر، مشخص کنیم.

تمام ویژگی های اندازه گذاری در CSS