ارتفاع و عرض (Height/Width)
تو CSS منظور از «ارتفاع و عرض (Height/Width)» اندازه جعبه محتواست. یعنی چقدر قد داشته باشد و چقدر پهن باشد. مرورگر بر اساس این اعداد، جعبه را می کشد.
تعریف ساده و نمونه سریع
ویژگی های «height» و «width» اندازه ناحیه محتوا را تعیین می کنند. مرز، فاصله داخلی و بیرونی داخلشان حساب نمی شود.
<style>
.hero {
height: 70px;
width: 100%;
border-width: 1px;
border-style: solid;
padding: 8px;
}
</style>
<div class="hero">Height 70px, Width 100%</div>
تنظیم height و width در عمل
در این مثال، ارتفاع ثابت و عرض درصدی است. درصد از عرضِ ظرف محاسبه می شود.
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
<div>Box with 200px x 50%</div>
مثال دوم: هر دو مقدار ثابت
وقتی هر دو طول و عرض پیکسلی باشند، اندازه دقیقاً همان می شود.
<style>
.fixed {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
<div class="fixed">100px x 500px</div>
نکته: «height» و «width» شامل padding، border و margin نیستند. آن ها فقط خود محتوا را اندازه می گیرند.
مقدارهای مجاز برای ارتفاع و عرض
auto: مرورگر خودش حساب می کند.length: عدد با واحدی مثل px، cm، em.%: درصدی از ظرف والد.initial: برگشت به مقدار پیش فرض.inherit: ارث از عنصر والد.
حداکثر عرض با max-width
«حداکثر عرض (max-width)» سقف پهنا را می گذارد. پس عنصر از این حد بزرگ تر نمی شود و پیمایش افقی کمتر می شود.
<style>
.div1 {
max-width: 500px;
background-color: powderblue;
}
.div2 {
width: 500px;
background-color: powderblue;
}
</style>
<div class="div1">max-width: 500px</div>
<div class="div2">width: 500px</div>
عرض واکنش گرا: 100% همراه max-width
این الگو روی موبایل نرم عمل می کند. عرض پر می شود؛ اما از حد مشخص بیشتر نمی شود.
<style>
.container {
width: 100%;
max-width: 900px;
background-color: powderblue;
}
</style>
<div class="container">Fluid width, capped at 900px</div>
گام های عملی
- اول ظرف والد را مشخص کن و محدودیتش را بدان.
- بعد «ارتفاع و عرض» را با نیاز صفحه تنظیم کن.
- نهایتاً اگر اسکرول افقی شد، از «max-width» استفاده کن.
هشدار: اگر همزمان «width» از «max-width» بزرگ تر شود، «max-width» برنده است.
برای درک بهتر جمع کل اندازه ها، صفحه مدل جعبه را ببین. همچنین درباره فاصله داخلی، بخش حاشیه داخلی (Padding) و درباره همین مبحث، صفحه ارتفاع و عرض مرجع تو است.
جمع بندی سریع
- ارتفاع و عرض فقط محتوای داخل را می گیرند.
- درصدها از ظرف والد حساب می شوند.
- max-width جلوی پهنای اضافی را می گیرد.
- اگر تنگ شد، از الگوی 100% + max-width استفاده کن.