مدل جعبه‌ای یا CSS Box Model یکی از مهم‌ترین مفاهیم در طراحی وب است. در واقع، هر عنصر در صفحه وب یک جعبه یا مستطیل محسوب می‌شود که می‌توانیم ظاهر و فاصله‌های آن را کنترل کنیم. اگر این مفهوم را خوب درک کنیم، طراحی وب یعنی هنر مدیریت همین جعبه‌هاست.

---

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

هر جعبه در CSS از چهار بخش تشکیل می‌شود:

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

---

🎨 مثال عملی

تعریف یک جعبه ساده

.box-a {
  background-color: lightgray;
  padding: 30px;
  border: 3px solid black;
}

• رنگ پس‌زمینه خاکستری
• فاصله داخلی ۳۰ پیکسل
• قاب سیاه با ضخامت ۳ پیکسل

ایجاد جعبه دوم و فاصله بین آن‌ها

.box-b {
  background-color: orange;
}

.box-a {
  margin-bottom: 20px;
}

با این کار، بین جعبه اول و دوم فاصله‌ی ۲۰ پیکسلی ایجاد می‌شود.

---

📏 کنترل عرض و ارتفاع

اگر برای .box-a مقدار زیر را تعیین کنیم:

.box-a {
  width: 200px;
  height: 150px;
}

اندازه نهایی جعبه بزرگ‌تر از این مقادیر خواهد شد، چون padding و border هم به ابعاد اضافه می‌شوند.

---

🛠️ راه‌حل: box-sizing

برای جلوگیری از محاسبات دستی، می‌توانیم از ویژگی زیر استفاده کنیم:

.box-a {
  box-sizing: border-box;
}

با این کار، مرورگر padding و border را داخل همان ابعاد مشخص‌شده قرار می‌دهد و اندازه واقعی جعبه دقیقاً همان چیزی خواهد بود که تعیین کرده‌ایم.

---

📚 جمع‌بندی

• هر عنصر در CSS یک جعبه است.
• Padding فضای داخلی، Border قاب دور، و Margin فضای خارجی جعبه را مشخص می‌کنند.
• با تعیین width و height می‌توانیم اندازه جعبه را کنترل کنیم.
• ویژگی box-sizing: border-box باعث می‌شود ابعاد نهایی دقیقاً همان چیزی باشد که ما تعیین کرده‌ایم.