CSS box model ni nini?

Question

Accepted Answer

Kila kipengele katika CSS ni sanduku lenye sura nne **box** lenye tabaka nne, kutoka ndani nje: **content**, **padding**, **border** na **margin**. Kuelewa jinsi zinavyounganisha ndilo msingi wa utengaji wote.

```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 */
}
```

## Ujinga wa kawaida: upana wa jumla

Na **chaguo-msingi** `box-sizing: content-box`, upana uliochorwa ni *kubwa* kuliko `width` unayoweka, kwa sababu padding na border huongezwa juu:

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

Hii inashangilia wanaoanza — unaweka `width: 200px` lakini inachukua 250px. Suluhisho ambalo kila mtu anatumia:

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

## padding vs margin

- **padding** — nafasi *ndani* ya mpaka; ni sehemu ya kipengele (inayobofya, inakubali rangi ya usuli).
- **margin** — nafasi *nje* ya mpaka; transparent, na marjina ya wima inayokaribiana **kuanguka** (kubwa kati ya marjina miwili inayokamatiana inashinda).

## Kwa nini ni muhimu

Box model inaangazia jinsi vipengele vina saizi kubwa kabisa na jinsi vyavyotengana.

Kujua kuwa mfano wa chaguo-msingi unaongeza padding/border kwa `width` (na kwa nini `border-box` ni mgawo wa karibu kote) inazuia aina ya kawaida ya machafuko ya saizi ya utengaji.