box-sizing en CSS : pourquoi votre largeur ne fait jamais la bonne taille

Vous fixez width: 300px sur une carte, vous ajoutez un padding pour l'aérer, et la carte affiche soudain 340 pixels à l'écran. Ce n'est pas un bug : c'est le comportement par défaut du Modèle de boîte dans tous les navigateurs. box-sizing est la propriété qui permet de le changer, une fois pour toutes, dès la première ligne d'une feuille de style.

Comprendre cette propriété évite des heures de calculs mentaux inutiles, et explique pourquoi presque aucun projet professionnel ne se contente du réglage par défaut du navigateur.

Définition

box-sizing détermine ce que mesurent réellement width et height : uniquement le contenu, ou le contenu additionné du padding et de la bordure. Deux valeurs s'opposent, content-box, le comportement par défaut, et border-box, celui que la quasi-totalité des sites adoptent volontairement.

.carte {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #1f2937;
}

/* Largeur finale à l'écran : exactement 300px */

content-box : le comportement par défaut

Sans box-sizing déclaré, un navigateur applique content-box : width ne fixe que la largeur du contenu, le padding et la bordure s'ajoutent par-dessus, agrandissant la boîte au-delà de la valeur écrite.

Avec content-box, ajouter un padding sans jamais toucher à width fait grandir chaque boîte, un effet en cascade sur toute une grille de cartes censées faire la même largeur.

border-box : tout inclus dans la largeur

Avec box-sizing: border-box, width devient la taille finale réellement affichée, celle qu'on voit et qu'on mesure. Le padding et la bordure viennent grignoter l'espace disponible pour le contenu, jamais agrandir la boîte au-delà de la valeur déclarée.

C'est ce qui rend les calculs de mise en page prévisibles : une grille de trois colonnes de 33% chacune reste bien à 33%, même en ajoutant du padding ou une bordure à chaque colonne.

Le reset universel : box-sizing: border-box partout

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

Cette règle, appliquée au sélecteur universel, se retrouve en tête de presque toute feuille de style professionnelle, souvent au sein d'un CSS reset et normalize plus large. Elle applique border-box à tous les éléments de la page, y compris ceux générés par ::before et ::after, sans exception à gérer au cas par cas. Notre formation HTML et CSS fait poser ce reset dès la première feuille de style écrite par l'apprenant, pour qu'il devienne un réflexe avant même d'avoir rencontré le problème qu'il résout.

Un cas fréquent : les champs de formulaire

Les éléments de formulaire, input, textarea et button, ont longtemps hérité de leur propre box-sizing dépendant du système d'exploitation plutôt que de la feuille de style, ce qui provoquait des débordements de bordure incohérents entre navigateurs. Le sélecteur universel du reset les couvre aujourd'hui sans exception, mais vérifier ce point reste un bon réflexe sur un projet ancien qui n'a jamais posé ce reset explicitement.

Questions fréquentes

Non, la valeur écrite dans le code reste identique. Ce qui change, c'est ce qu'elle mesure réellement à l'écran : le contenu seul en content-box, ou la boîte entière padding et bordure compris en border-box.

Dans la pratique, oui : c'est devenu un standard de fait tant il simplifie les calculs de mise en page. La seule prudence à avoir concerne un projet déjà avancé, où le changer en cours de route peut légèrement décaler des tailles déjà ajustées à l'ancien comportement.

Non, ce sont deux mécanismes complètement indépendants. box-sizing ne touche jamais à la margin, qui reste extérieure à la boîte quelle que soit la valeur choisie, et continue donc de fusionner verticalement dans les mêmes conditions.