box-sizing

On voit de plus en plus la règle box-sizing: border-box; appliquée aux balises.
Fichier->

Pourquoi est-il important de prendre en compte la taille de la bordure ?


Sur l'exemple suivant, les deux blocs ont une taille respective de 60% et 40% de leur conteneur.

Dans le cas d'un positionnement en ligne dans un conteneur flex, si la bordure est intérieure, ils sont alignés (taille = (60 + 40)% = 100%).
Dans le cas de la bordure à l'extérieur, la somme dépasse les 100% du conteneur. La taille = (60 + 40)% + (bordure droite + bordure gauche)*2 > 100%)


Cliquez sur le bloc 2
1