CSS – ارتفاع/عرض (Height/Width)
خواص height
و width
در CSS برای تنظیم ارتفاع و عرض یک عنصر استفاده میشوند. همچنین خاصیت max-width
برای تعیین حداکثر عرض یک عنصر به کار میرود.
خواص تنظیم ارتفاع و عرض
height
: برای تعیین ارتفاع یک عنصر.width
: برای تعیین عرض یک عنصر.
نکته: خواص height
و width
شامل padding
، border
یا margin
نمیشوند و فقط ناحیه داخلی عنصر را تنظیم میکنند.
مقادیر قابل استفاده برای height و width:
auto
: مقدار پیشفرض است و مرورگر به طور خودکار اندازه را محاسبه میکند.- طول (length): میتواند بر اساس px، cm و غیره تنظیم شود.
- درصد (%): بر اساس درصدی از عنصر والد.
initial
: مقدار را به حالت اولیه باز میگرداند.inherit
: مقدار را از عنصر والد به ارث میبرد.
مثالها:
تعیین ارتفاع و عرض به صورت درصدی:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
تعیین ارتفاع و عرض ثابت:
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
خاصیت حداکثر عرض (max-width)
خاصیت max-width
برای تعیین بیشترین عرض مجاز یک عنصر استفاده میشود. این مقدار میتواند به صورت طولی (px، cm و غیره) یا درصدی از عنصر والد تنظیم شود. همچنین اگر مقدار none
تنظیم شود، هیچ محدودیتی برای عرض وجود نخواهد داشت.
نکته: اگر هر دو خاصیت width
و max-width
برای یک عنصر استفاده شوند، و مقدار width
بیشتر از max-width
باشد، مقدار max-width
اعمال میشود و مقدار width
نادیده گرفته خواهد شد.
مثال:
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
در این مثال، حتی اگر عرض عنصر بیشتر از 500px تنظیم شود، به دلیل وجود خاصیت max-width
، عرض عنصر نمیتواند از 500px تجاوز کند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام