Qu'est-ce que la propriété box-sizing: border-box et quel rôle joue-t-elle en CSS?

La propriété box-sizing détermine comment la largeur et la hauteur totales d'un élément sont calculées.

box-sizing: content-box (valeur par défaut) — la largeur et la hauteur concernent uniquement le contenu (content). La padding et la border sont ajoutées aux valeurs spécifiées de largeur/hauteur.

box-sizing: border-box — la largeur et la hauteur incluent la padding et la border. Le content est réduit pour s'adapter à l'intérieur des dimensions spécifiées.

Le rôle de box-sizing: border-box en CSS:

• Simplification des calculs: Facilite le calcul des tailles des éléments, notamment lors de l'utilisation de padding et border.
• Prévisibilité du rendu: Permet de définir précisément la taille des blocs, indépendamment de padding et border, rendant le rendu plus prévisible.
• Confort avec le modèle de boîte: Correspond à la compréhension intuitive de la taille du bloc — ses bordures. Facilite la création de grilles et de composants de taille fixe.

Exemple:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Largeur totale = 100 + 10*2 + 1*2 = 122px */
  /* Hauteur totale = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Largeur totale = 100px */
  /* Hauteur totale = 100px */
  /* Le contenu occupera 100 - 10*2 - 1*2 = 78px en largeur et hauteur */
}