Cos'è il CSS box model?

Question

Accepted Answer

Ogni elemento in CSS è una scatola rettangolare fatta di quattro strati, dall'interno verso l'esterno: **content**, **padding**, **border** e **margin**. Comprendere come si combinano è il fondamento di tutto il 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 classico inganno: la larghezza totale

Con il valore **default** `box-sizing: content-box`, la larghezza renderizzata è *più grande* di quella che hai impostato con `width`, perché padding e border vengono aggiunti in cima:

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

Ciò sorprende i principianti — imposti `width: 200px` ma occupa 250px. La soluzione che usa tutti:

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

## padding vs margin

- **padding** — spazio *dentro* il border; fa parte dell'elemento (cliccabile, prende il colore di sfondo).
- **margin** — spazio *fuori* il border; trasparente, e i margin verticali adiacenti **collassano** (vince il più grande tra due margin che si toccano).

## Perché è importante

Il box model governa quanto sono effettivamente grandi gli elementi e come si distanziano l'uno dall'altro.

Sapere che il modello default aggiunge padding/border a `width` (e perché `border-box` è la soluzione quasi universale) previene la confusione di sizing layout più comune.