Quand j'ai commencé à apprendre à coder, je me souviens d'un petit exercice que je m'étais donné : reproduire une simple boîte, juste pour m'entraîner sur le box model - cette histoire de bordures, de marges, de padding, de largeur et de hauteur qu'on appelle des « boîtes » en CSS.
J'ai codé mon HTML : une balise div ouvrante et fermante, à laquelle j'ai ajouté une classe box. Direction le fichier CSS : j'ai défini une largeur de 200px, une hauteur de 100px, et une couleur de fond marron. J'ouvre le fichier dans le navigateur pour voir à quel point j'étais devenu « fort »... et là, une boîte pleine à l'écran. Pas très jolie, mais pour moi, à ce moment-là, c'était parfait.
Je suis retourné dans mon HTML, j'ai ajouté un second div à l'intérieur du premier, avec son propre style : 100px de large, 50px de haut, fond bleu. Rechargement de la page. Et là, je voyais à quel point j'étais « fort ».
Le moment qui a tout changé
C'est là que les choses sont devenues intéressantes. J'ai voulu ajouter du padding à mon bloc marron principal - un padding de 20px sur tous les côtés. J'actualise la page, et je remarque quelque chose d'étrange : certes, le padding s'était bien appliqué, mais mon cadre marron avait complètement changé de largeur et de hauteur. Il ne respectait plus du tout les dimensions que j'avais définies au départ.
.box {
width: 200px;
height: 100px;
padding: 20px;
background-color: brown;
}Rendu - le pointillé marque les 200 × 100px demandés
La boîte marron déborde bien au-delà du cadre pointillé : 240 × 140px réels, contre 200 × 100px demandés. (Ce site applique border-box partout par défaut - content-box est forcé ici pour reproduire fidèlement le comportement décrit.)
Résultat affiché : une boîte de 240px de large sur 140px de haut (200 + 20 + 20, et 100 + 20 + 20), et non plus 200 × 100px comme demandé. Je n'ai pas voulu laisser ça comme ça. Je voulais comprendre. Et c'est en creusant que j'ai découvert une propriété CSS qui permet de remédier à ce problème - mais remédier à quoi, au juste ?
Le vrai problème
Par défaut, quand on écrit width: 200px, cette valeur s'applique uniquement au contenu de la boîte. Le padding et la bordure viennent s'ajouter par-dessus, et agrandissent la boîte au-delà de ce qu'on avait prévu. Autrement dit : plus j'ajoute de padding ou de bordure, plus ma boîte grossit - alors que je voulais qu'elle garde une taille fixe. C'est exactement ce qui m'était arrivé : mon div de 200 × 100px était devenu 240 × 140px, simplement parce que j'avais ajouté du padding.
La suite (la solution et pourquoi l'appliquer partout) est réservée aux contributeurs.