Tout élément html est délimité 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.
Il faut comprendre notamment qu'une boîte est constituée de plusieurs zones :
la zone de contenu (content), bordée par une marge
interne (padding), puis d'une bordure (border) et enfin d'une marge externe (margin).
Mais les dimensions que l'on déclare sur la boîte (width et height) n'englobent pas
l'ensemble (détails ci-dessous), d'où parfois
certaines difficultés à placer les boîtes les unes par rapport aux autres.
box-sizing: content-box;
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.
box-sizing: border-box;
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.