Menene CSS box model?

Question

Accepted Answer

Kowane eleminti a cikin CSS shafi ne mai kusurwoyi hudu **box** wanda ke da yadudduka hudu, daga ciki zuwa waje: **content**, **padding**, **border**, da **margin**. Fahimta yadda suke haduwa shine tushe na duk tsinkayi.

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

## Kalmar yadda ita ta kasance: jinin jimillar

Tare da **default** `box-sizing: content-box`, nisan da aka buga ya fi nisan `width` da ka saita, saboda padding da border ana ƙari:

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

Wan ya taɓa wasai - ka saita `width: 200px` amma ta ɗaukar 250px. Kasuwancin da kowa ya yi amfani:

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

## padding da margin

- **padding** — sarari *cikin* border; yana zafin abin (ana iya diga, ya ɗauki launi na baki).
- **margin** — sarari *waje* na border; gaskiya, da kuma margin na tsaye masu haɗi **suka rushe** (mafi girma daga abubuwa biyu masu haɗi suka yi nasara).

## Me ya sa haka mahimmaci

Box model yana tumaki yadda abubuwa suke girma da yadda suke warwarka.

Sanin cewa tsarin tushe yana ƙari padding/border zuwa `width` (da me ya sa `border-box` kusan zaman jiya) yana hana mafi gida rikitarwar girman tsinkayi.