مدل جعبه (Box Model) چیست؟

در CSS هر المان block (مثل div، p، h1) به‌صورت یک جعبه در نظر گرفته می‌شود. از داخل به بیرون این لایه‌ها را داریم:

• Content — محتوای واقعی (متن یا تصویر)
• Padding — فاصلهٔ داخلی بین محتوا و border
• Border — خط دور جعبه
• Margin — فاصلهٔ بیرونی با المان‌های دیگر

کنترل اندازه و فاصله

.box {
    width: 200px;
    height: 100px;
    padding: 16px;
    border: 1px solid #ccc;
    margin: 20px;
}

box-sizing تعیین می‌کند که width و height فقط محتوا را شامل شوند یا محتوا + padding + border. مقدار پیش‌فرض مرورگر content-box است؛ یعنی عرض و ارتفاع فقط به محتوا اعمال می‌شوند و padding و border به آن اضافه می‌شوند. برای کار راحت‌تر معمولاً از box-sizing: border-box استفاده می‌کنیم تا padding و border داخل همان عرض و ارتفاع حساب شوند.

* {
    box-sizing: border-box;
}

خلاصه

با padding فضای داخلی و با margin فضای بیرونی را تنظیم می‌کنی. برای چیدمان چند المان در کنار هم در درس بعد از Flexbox استفاده می‌کنیم.