X'inhu l-mudell tal-kaxxa CSS?

Question

Accepted Answer

Kull element f'CSS huwa kaxxa rettangolari magħmula minn erba' saffi, minn ġewwa għal barra: **content**, **padding**, **border**, u **margin**. Il-fehim ta' kif jingħaqdu huma huwa l-għasa ta' kull layout.

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

## Il-ghabilla klassika: wisa' totali

Bil-**default** `box-sizing: content-box`, il-wisa' li jiġi rrestat huwa *akbar* mill-`width` li ħaddet, minħabba li padding u border jiġu miżjuda fuq:

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

Da isbaħħa l-ħaddiema — ħaddet `width: 200px` iżda tokkupa 250px. Ir-rimied li kollha jużaw:

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

## padding versus margin

- **padding** — spazju *ġewwa* l-ħadd; hija parti tal-element (clickable, tieħu l-kulur ta' sfond).
- **margin** — spazju *barra* l-ħadd; trasparenti, u l-marġini vertikal li jmissuhom **jidrugaw** (akbar mir-rnexxija tal-marġini li jmissuhom jirbah).

## Għaliex dan importanti

Il-mudell tal-kaxxa jikkontrolla kemm realment huma kbar l-elementi u kif jispaċċjaw bejn xulxin.

L-għarfien li l-mudell default iżid padding/border għal `width` (u għaliex `border-box` hija l-isteħsaba ta' ftit mhux universali) jipprevjeni l-konfużjoni ta' sizing layout l-aktar komuni.