Comment la propriété box-sizing influence-t-elle la taille de l'élément?

La propriété CSS box-sizing détermine comment la taille d’un élément est calculée — en incluant ou non les marges internes (padding) et les bordures (border).

• Valeur content-box (par défaut) : la largeur et la hauteur de l’élément définissent uniquement la taille du contenu. Les marges internes et les bordures s’ajoutent à ces dimensions, augmentant la taille finale de l’élément.

• Valeur border-box : la largeur et la hauteur incluent le contenu, les marges internes et les bordures. Cela signifie que si vous définissez une largeur de 100px, le contenu sera réduit en tenant compte du padding et du border pour que la taille totale reste à 100px.

Exemple :

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

Dans ce cas, l’élément .box aura une largeur totale de 200px, y compris padding et border. Si c’était content-box, la largeur totale serait 200 + 210 + 25 = 230px.

L’utilisation de border-box simplifie souvent la mise en page, car les dimensions des éléments ne "se déforment" pas à cause du padding et du border.