Le modèle de boîte

En CSS, chaque élément HTML est traité comme une boîte rectangulaire. Le modèle de boîte décrit l'espace qu'occupe un élément et se compose de quatre couches, de l'intérieur vers l'extérieur :

1. Contenu — Le contenu réel de l'élément (texte, images, etc.). Contrôlé par width et height.
2. Padding — L'espace entre le contenu et la bordure. Le padding est transparent et repousse la bordure vers l'extérieur depuis le contenu.
3. Bordure — Un bord visible (ou invisible) autour du padding. Tu peux contrôler sa largeur, son style et sa couleur.
4. Marge — L'espace à l'extérieur de la bordure qui sépare l'élément des éléments voisins. Les marges sont toujours transparentes.

Comprendre le modèle de boîte est essentiel car il affecte directement la mise en page. L'espace total qu'occupe un élément est la somme de son contenu, padding, bordure et marge.

Par défaut, width et height s'appliquent uniquement à la zone de contenu. Le padding et la bordure sont ajoutés par-dessus, rendant l'élément plus grand que la largeur spécifiée. C'est ce qu'on appelle le dimensionnement content-box et cela conduit souvent à des problèmes de mise en page inattendus.

Le modèle border-box change ce comportement pour que width et height incluent le padding et la bordure. La zone de contenu rétrécit pour les accommoder :

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 3px solid black;
}
/* La largeur totale est exactement 200px */
/* Zone de contenu = 200 - 40 - 6 = 154px */

La plupart des CSS resets modernes appliquent border-box à tous les éléments :

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

Cela rend le dimensionnement beaucoup plus prévisible et est considéré comme une bonne pratique.