خواص 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 تجاوز کند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام