ما هو نموذج الصندوق في CSS؟

Question

Accepted Answer

كل عنصر في CSS عبارة عن صندوق مستطيل **box** يتكون من أربع طبقات، من الداخل إلى الخارج: **content** و **padding** و **border** و **margin**. فهم كيفية دمجها معاً هو أساس كل تخطيط.

```text
┌─────────────── margin ───────────────┐  ← space OUTSIDE, between elements
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← space INSIDE, around content
│  │  │       content            │  │  │  ← text/image (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content width (in the default box model) */
  padding: 20px;     /* inner spacing — pushes content inward */
  border: 5px solid; /* the visible edge */
  margin: 10px;      /* outer spacing — separates from neighbors */
}
```

## المشكلة الكلاسيكية: إجمالي العرض

مع القيمة الافتراضية `box-sizing: content-box`، يكون العرض المعروض *أكبر* من قيمة `width` التي تعيّنها، لأن padding و border يُضافان في الأعلى:

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

هذا يفاجئ المبتدئين — تعيّن `width: 200px` لكنه يشغل 250px. الحل الذي يستخدمه الجميع:

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding مقابل margin

- **padding** — مساحة *داخل* الحد؛ إنها جزء من العنصر (قابلة للنقر، تأخذ لون الخلفية).
- **margin** — مساحة *خارج* الحد؛ شفافة، والهوامش الرأسية المتجاورة **تنهار** (الهامش الأكبر من بين الهامشين المتلامسين يفوز).

## لماذا هذا مهم

نموذج الصندوق يحكم حجم العناصر الفعلي وكيفية تباعدها.

معرفة أن النموذج الافتراضي يضيف padding/border إلى `width` (ولماذا `border-box` هو الحل شبه الشامل) يمنع الالتباس الأكثر شيوعاً في تحديد حجم التخطيط.