ارتفاع و عرض در 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 مرجع های مناسبی برای جزئیات بیشتر هستند.