ارتفاع و عرض در CSS (Height, Width, Max-width)

در این بخش «ارتفاع و عرض (Height & Width)» و همچنین «حداکثر عرض (Max-width)» را می بینید. این ویژگی ها اندازه ناحیه محتوا را تعیین می کنند و برای طرح های واکنش گرا حیاتی هستند.

مروری بر ارتفاع و عرض

ویژگی های height و width برای تعیین ارتفاع و عرض عنصر به کار می روند و پدینگ، کادر و مارجین را شامل نمی شوند.

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

نکته: مقدارهای ممکن شامل auto، طول های مطلق/نسبی، %، و کلیدواژه های initial و inherit است.

نمونه های ارتفاع و عرض

در نمونه زیر یک عنصر با عرض 500px و ارتفاع 100px تعریف شده است.

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

هشدار: ارتفاع و عرض فقط ناحیه داخل پدینگ و کادر را تعیین می کنند؛ بنابراین افزودن پدینگ یا کادر اندازه کل را افزایش می دهد.

کار با حداکثر عرض (Max-width)

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

.div1 { max-width: 500px; background-color: powderblue; }
.div2 { width: 500px; background-color: powderblue; }

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

.container { width: 100%; max-width: 900px; background-color: powderblue; }

ارتفاع و عرض: کلیدواژه ها و درصد

• auto (پیش فرض)؛ مرورگر مقدار را محاسبه می کند.
• طول ها مانند px، cm، em.
• % بر اساس بلوک حاوی محاسبه می شود.
• initial و inherit.

مطالب مرتبط با ارتفاع و عرض

برای درک بهتر «ارتفاع و عرض»، این مباحث را نیز ببینید: لایه (Padding)، مدل جعبه (Box Model). همچنین در بخش کادرها: کادرها و عرض کادر.

CSS width در MDN و CSS max-width در MDN مرجع های مناسبی برای جزئیات بیشتر هستند.