Que fait box-sizing: border-box ?

Question

Accepted Answer

`box-sizing` contrôle **ce que mesurent réellement les propriétés `width` et `height`**. La valeur par défaut (`content-box`) mesure uniquement le contenu ; `border-box` les fait inclure le remplissage et la bordure.

## Pourquoi c'est important

```css
.box {
  box-sizing: content-box; /* the default */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px  ← bigger than you asked for! */
```

Avec `content-box`, le remplissage et la bordure sont **ajoutés par-dessus** la `width`, ce qui rend l'élément plus large que le nombre défini. Cela casse les mises en page : une boîte `width: 50%` avec du remplissage dépasse ses 50 %.

## La solution : border-box

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
```

Avec `border-box`, `width` est la **largeur finale** rendue — le remplissage et la bordure sont soustraits de l'intérieur. Le nombre défini est la taille obtenue, ce qui est beaucoup plus intuitif.

## La réinitialisation universelle

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

Presque toutes les feuilles de style modernes, frameworks et réinitialisations l'appliquent globalement. Cela rend le dimensionnement prévisible : `width: 50%` + remplissage reste exactement à 50 % de large, deux boîtes `width: 50%` s'assoient côte à côte sans déborder, etc.

## Pourquoi c'est important

`border-box` supprime la source la plus courante de maux de tête liés aux calculs de mise en page — devoir ajouter mentalement le remplissage et la bordure à chaque largeur.

Le définir globalement est considéré comme une meilleure pratique par défaut, car « la largeur que je définis est la largeur que j'obtiens » est la façon dont vous vous attendez naturellement à ce que le dimensionnement fonctionne.