فصل پنجم: مدل جعبه‌ای (Box Model) در CSS

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

اجزای مدل جعبه‌ای

1. content (محتوا)

• اصلی‌ترین بخش جعبه که متن یا تصویر داخلش قرار می‌گیره.

1. padding (فاصله داخلی)

• فاصله‌ی بین محتوا و خط کادر (border) عنصر. هر چی padding بیشتر شه، فضای خالی دورتادور محتوا زیاد می‌شه.

1. border (کادر دور عنصر)

• خطی دور عنصر که می‌تونه ضخیم یا نازک، رنگی یا بی‌رنگ باشه.

1. margin (فاصله بیرونی)

• فاصله عنصر با دیگر عناصر و جعبه‌های اطرافش.

مثال کاربردی با CSS

.box {
  margin: 20px;           /* فاصله بیرونی */
  border: 4px solid #2196f3;  /* کادر */
  padding: 16px;           /* فاصله داخلی */
  background-color: #e3f2fd;
  width: 300px;
}

<div class="box">
  Box Model Example!
</div>

نکته مهم:

در حالت پیش‌فرض، width فقط مربوط به بخش content هست. یعنی اگر برای یک div مقدار width بذاری و بعد padding و border بدی، عرض کلی عنصر بیشتر از اون چیزی میشه که مشخص کردی!
برای ساده‌تر شدن مدیریت اندازه، می‌تونی این خط رو به کدت اضافه کنی:

* {
  box-sizing: border-box;
}

این باعث میشه، padding و border هم در همون width محاسبه بشن.

تمرین

یک div بساز و خواص margin، padding، border و background-color رو براش تنظیم کن.
مقدار هرکدوم رو کم‌وزیاد کن تا تاثیرشون رو روی ظاهر جعبه ببینی.
در نهایت، ویژگی box-sizing رو فعال کن و تفاوتش رو بررسی کن.