مدل جعبه ای (Box Model)
در CSS هر عنصر یک «جعبه» است. «مدل جعبه ای (Box Model)» می گوید محتوا کجاست و فاصله ها کجاست. پس راحت تر چیدمان را کنترل می کنیم.
اجزای مدل جعبه ای
هر جعبه چهار بخش دارد: «محتوا (Content)»، «حاشیه داخلی (Padding)»، «حاشیه (Border)»، و «فاصله بیرونی (Margin)».
- Content: همان متن و تصویر داخل جعبه.
- Padding: فاصله شفاف دورِ محتوا، داخل مرز.
- Border: خط دورِ پدینگ و محتوا.
- Margin: فاصله شفاف بیرونِ مرز تا جعبه های دیگر.
<style>
.box {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
<div class="box">مدل جعبه ای در عمل</div>
محاسبه اندازه کل عنصر
وقتی «height» و «width» می گذاری، فقط «محتوا» اندازه می گیرد. برای کل پهنا و ارتفاع، پدینگ و مرز را هم جمع کن.
<style>
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
<div>Total width = 350px, total height = 80px</div>
فرمول پهنا: پهنای کل = width + padding چپ + padding راست + border چپ + border راست.
فرمول ارتفاع: ارتفاع کل = height + padding بالا + padding پایین + border بالا + border پایین.
نکته: «margin» فضای صفحه را می گیرد، ولی داخل اندازه خود جعبه حساب نمی شود.
گام های عملی برای کنترل جعبه
- اول اندازه محتوا را با height و width تعیین کن.
- بعد پدینگ و مرز را طبق نیاز اضافه کن.
- نهایتاً با margin فاصله از بقیه بساز.
برای ادامه یادگیری به صفحه حاشیه داخلی (Padding) و ارتفاع و عرض سر بزن. همچنین این صفحه مدل جعبه ای مرجع سریع تو است.
جمع بندی سریع
- Content داخل، Padding دورِ محتواست.
- Border دورِ پدینگ است.
- Margin فاصله بیرونی می سازد.
- height/width فقط محتوا را می گیرند.