CSS Height, Width and Max-width
۱. Height (ارتفاع)
-
مشخص میکند ارتفاع یک المان چقدر باشد.
-
مقدار میتواند به صورت پیکسل، درصد، em و غیره باشد.
-
اگر مقدار ارتفاع تعیین نشود، ارتفاع به صورت خودکار بر اساس محتوا تنظیم میشود.
div {
height: 200px; /* ارتفاع ثابت 200 پیکسل */
}
۲. Width (عرض)
-
مشخص میکند عرض یک المان چقدر باشد.
-
مشابه height میتواند مقدار ثابت یا نسبی داشته باشد.
div {
width: 100%; /* عرض کامل عنصر والد */
}
۳. Max-width (حداکثر عرض)
-
بیشینه عرضی که یک المان میتواند داشته باشد را محدود میکند.
-
وقتی عرض المان بزرگتر از این مقدار شود، از این مقدار تجاوز نمیکند.
-
بسیار کاربردی برای طراحی واکنشگرا (Responsive) که بخواهیم عرض حداقلی یا حداکثری کنترل شود.
div {
max-width: 500px; /* بیشترین عرض 500 پیکسل */
width: 100%; /* عرض المان به اندازه والد تا حداکثر 500 پیکسل */
}
نکات مهم:
-
اگر مقدار
widthیاheightبیشتر ازmax-widthیاmax-heightباشد، مقدار ماکسیمم اعمال میشود. -
اگر از واحد درصد استفاده شود، نسبت به اندازهی المان والد محاسبه میشود.
مثال ترکیبی:
.container {
width: 100%;
max-width: 1200px; /* حداکثر عرض 1200 پیکسل */
height: 300px;
background-color: lightblue;
}
در این مثال، .container عرضش تا 100% صفحهنمایش است اما بیشتر از 1200 پیکسل نمیشود و ارتفاع ثابت 300 پیکسل دارد.
دیدگاهتان را بنویسید