Tout élément html est délimitée par une boîte rectangulaire, de bords parallèles aux bords de l'écran.
Pour placer dans une page les boîtes les unes par rapport aux autres, il est important de comprendre comment sont calculées leurs dimensions.
Par défaut, les boîtes des éléments html sont déclarées box-sizing: content-box;. Cela signifie que width et height sont les largeur et hauteur de la partie contenu de la boîte et que les marges internes, les bordures, les marges externes ne sont pas comptées dans width et height.
La largeur réelle d'une boîte est donc : largeur de la marge externe gauche (margin-left) + largeur de la bordure gauche (border-left-width) + largeur de la marge interne gauche (padding-left) + largeur du contenu (width) + largeur de la marge interne droite (padding-right) + largeur de la bordure droite (border-right-width) + largeur de la marge externe droite (margin-right).
Définition analogue pour la hauteur height de la boîte.
La déclaration box-sizing: border-box; change la signification de width et height.
La largeur réelle d'une boîte est donc, avec cette déclaration : marge externe gauche (margin-left) + width (qui couvre bordure gauche + marge interne gauche + largeur du contenu + marge interne droite + bordure droite ) + marge externe droite (margin-right).
Définition analogue pour la hauteur height de la boîte.