Quelle est la différence entre box-sizing: content-box et border-box?

La différence entre box-sizing: content-box et box-sizing: border-box réside dans la façon dont le navigateur calcule la taille totale de l'élément :

• content-box (valeur par défaut) : la largeur et la hauteur spécifient uniquement le contenu. À ces dimensions, on ajoute les marges internes (padding) et les bordures (border), ce qui augmente la taille finale de l'élément.

• border-box : la largeur et la hauteur incluent le contenu, le padding et la bordure. Autrement dit, le padding et la border "s'intègrent" dans les dimensions définies.

Exemple :

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box; /* ou border-box */
}

• Avec content-box, la largeur totale sera : 200 + 102 + 52 = 230px.
• Avec border-box, la largeur totale restera 200px, et le contenu sera réduit pour accueillir le padding et la border.

L'utilisation de border-box est souvent plus pratique pour la mise en page, car les dimensions des éléments ne "gonflent" pas à cause du padding et de la border.