Taille des boîtes, padding et bordure

Par défaut, width règle la largeur du contenu de la boîte, c'est-à-dire que le padding et la bordure ne sont pas comptés.

Je suis un conteneur, qui fait 400 pixels de large.
Je suis un fils qui fait 400 pixels de large, avec une bordure : je dépasse du conteneur.
(toujours le conteneur)
Je suis un fils qui fait 400 pixels de large, avec un padding : je dépasse du conteneur.
(toujours le conteneur)
Je suis un fils qui fait 400 pixels de large, avec une bordure et un padding, mais je ne dépasse pas du conteneur car je suis en box-sizing:border-box !
(toujours le conteneur)

Pour compter le padding et la bordure dans la largeur, il faut changer le « mode de calcul » des dimensions en précisant box-sizing:border-box. (Regarder le code !)