Qu'est-ce que le modèle de boîte CSS?

Question

Accepted Answer

Chaque élément en CSS est une boîte rectangulaire **box** composée de quatre couches, de l'intérieur vers l'extérieur : **content**, **padding**, **border** et **margin**. Comprendre comment elles se combinent est le fondement de toute mise en page.

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

## Le piège classique : la largeur totale

Avec le **default** `box-sizing: content-box`, la largeur rendue est *plus grande* que la `width` que vous définissez, car le padding et la border s'ajoutent :

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

Cela surprend les débutants — vous définissez `width: 200px` mais elle occupe 250px. La solution que tout le monde utilise :

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

## padding vs margin

- **padding** — espace *à l'intérieur* de la border ; c'est une partie de l'élément (clickable, prend la couleur de fond).
- **margin** — espace *à l'extérieur* de la border ; transparent, et les margins verticales adjacentes **s'effondrent** (la plus grande des deux margins adjacentes gagne).

## Pourquoi c'est important

Le modèle de boîte gouverne la taille réelle des éléments et comment ils s'espacent.

Savoir que le modèle par défaut ajoute le padding/border à la `width` (et pourquoi `border-box` est le correctif quasi universel) prévient la confusion de dimensionnement de mise en page la plus courante.