مدل جعبه‌ای در CSS

Box Model (مدل جعبه‌ای) مفهومی بنیادین در CSS است که نشان می‌دهد هر عنصر HTML مانند یک جعبه در نظر گرفته می‌شود. این جعبه از چند لایه‌ی مختلف تشکیل شده که اندازه‌ی نهایی و فضای اطراف عنصر را تعیین می‌کنند. درک درست Box Model برای چیدمان صحیح عناصر در صفحه ضروری است.

لایه‌های Box Model

هر عنصر در CSS از چهار لایه‌ی اصلی تشکیل شده است که از داخل به بیرون عبارت‌اند از:

1. Content (محتوا): بخشی که متن یا محتوای اصلی عنصر در آن قرار دارد.
2. Padding (حاشیه‌ی داخلی): فضای بین محتوا و حاشیه‌ی عنصر.
3. Border (حاشیه): خطی که دور Padding و Content کشیده می‌شود.
4. Margin (حاشیه‌ی بیرونی): فضایی که عنصر را از سایر عناصر اطرافش جدا می‌کند.

div{
    width: 200px; 
    padding: 15px; 
    border: 5px solid steelblue; 
    margin: 20px; 
}

در این مثال، عنصر div دارای عرض محتوای 200px، حاشیه‌ی داخلی 15px ، حاشیه‌ی 5px و حاشیه‌ی بیرونی 20px است. هر یک از این لایه‌ها دور محتوای اصلی عنصر قرار می‌گیرند و روی هم اندازه‌ی نهایی عنصر را در صفحه تعیین می‌کنند.

نحوه‌ی محاسبه‌ی اندازه‌ی نهایی عنصر

به‌طور پیش‌فرض، مقدار width و height تنها اندازه‌ی بخش Content را مشخص می‌کند و مقادیر Padding و Border به آن اضافه می‌شوند. بنابراین اندازه‌ی واقعی عنصر در صفحه از فرمول زیر به‌دست می‌آید:

• عرض کل = width + padding چپ و راست + border چپ و راست
• ارتفاع کل = height + padding بالا و پایین + border بالا و پایین

کنترل محاسبه با box-sizing

ویژگی box-sizing مشخص می‌کند که مقدار width و height چگونه محاسبه شود. مقدار پیش‌فرض آن content-box است که فقط Content را در نظر می‌گیرد. با تغییر آن به border-box، مقدار Padding و Border نیز داخل همان عرض و ارتفاع تعریف‌شده جای می‌گیرند.

div{
    width: 200px;
    padding: 15px;
    border: 5px solid steelblue;
    box-sizing: border-box;
}

در این مثال، با تنظیم box-sizing: border-box;، عرض نهایی عنصر همچنان 200px باقی می‌ماند و مقادیر Padding و Border در همین فضا جای می‌گیرند، نه اینکه به آن اضافه شوند.