Vous donnez une largeur de 300 pixels à un élément, vous ajoutez un peu d’espace intérieur, et soudain il en occupe 340 à l’écran. Vous mettez une marge en bas d’un paragraphe et une marge en haut du suivant, mais l’espace obtenu n’est pas la somme des deux. Rien de tout cela n’est un bug : c’est le modèle de boîte CSS qui fait exactement ce pour quoi il a été conçu.
C’est probablement le concept le plus important des débuts en CSS. Une fois compris, une grande partie des mises en page qui « ne tombent pas juste » s’explique d’elle-même.
Chaque élément est une boîte
En CSS, absolument tout ce qui s’affiche dans une page est une boîte rectangulaire : un paragraphe, une image, un lien, un bouton. Cette boîte se compose de quatre couches emboîtées, de l’intérieur vers l’extérieur.
- Le contenu — le texte ou l’image elle-même. Ses dimensions sont contrôlées par
widthetheight. - Le padding — l’espace intérieur, entre le contenu et la bordure. Il prend la couleur de fond de l’élément.
- La bordure — le trait qui entoure le padding. Elle a une épaisseur, un style et une couleur.
- La marge — l’espace extérieur, qui repousse les éléments voisins. Elle est toujours transparente.
Une image mentale utile : le contenu est le tableau, le padding est le passe-partout blanc, la bordure est le cadre en bois, et la marge est la distance qui sépare ce cadre des autres tableaux accrochés au mur.
Le calcul qui surprend tout le monde
Par défaut, la propriété width ne définit que la largeur du contenu. Le padding et la bordure viennent s’ajouter par-dessus.
Prenons un exemple concret : un élément avec width: 300px, padding: 20px et border: 2px solid. La place réellement occupée à l’écran vaut :
300 + 20 + 20 + 2 + 2 = 344 pixels
Et si l’on ajoute margin: 10px, l’espace total pris dans le flux de la page atteint 364 pixels, même si la boîte visible n’en mesure que 344.
C’est la source classique des colonnes qui débordent. Deux colonnes à 50 % de largeur tiennent parfaitement côte à côte… jusqu’à ce qu’on leur ajoute du padding, et la seconde passe à la ligne.
content-box contre border-box
La propriété box-sizing permet de changer cette règle de calcul.
| content-box (défaut) | border-box | |
|---|---|---|
Ce que width définit | La largeur du contenu seul | Contenu + padding + bordure |
| width: 300px, padding: 20px, border: 2px | Occupe 344 px | Occupe 300 px |
| Le contenu mesure alors | 300 px | 256 px |
| Pratique pour | Rarement souhaité aujourd’hui | Grilles, colonnes, composants |
Avec border-box, la largeur annoncée est la largeur finale : le padding et la bordure sont pris à l’intérieur. C’est bien plus intuitif, au point que la quasi-totalité des projets modernes commencent par cette règle :
*, *::before, *::after { box-sizing: border-box; }
Notez que la marge reste toujours à l’extérieur, quel que soit le mode choisi. box-sizing n’a aucun effet sur elle.
La fusion des marges verticales
Deuxième comportement déroutant : quand deux marges verticales se rencontrent, elles ne s’additionnent pas. La plus grande l’emporte et l’autre disparaît.
Un paragraphe avec margin-bottom: 30px suivi d’un titre avec margin-top: 20px ne produit pas 50 pixels d’écart, mais 30. Ce phénomène s’appelle la fusion des marges, ou margin collapsing.
Quelques points à retenir :
- La fusion ne concerne que les marges verticales. Les marges horizontales s’additionnent normalement.
- Elle peut aussi se produire entre un parent et son premier ou dernier enfant, ce qui donne l’impression que la marge « sort » du conteneur.
- Elle n’a pas lieu à l’intérieur d’un conteneur en flexbox ou en grid, ce qui est une raison de plus d’utiliser ces modes de mise en page.
- Ajouter un padding ou une bordure au parent suffit souvent à empêcher la fusion parent-enfant.
Padding ou marge : lequel choisir ?
La confusion entre les deux est fréquente. Un critère simple : le padding sert à espacer un élément de son propre contenu, la marge sert à l’espacer des autres éléments.
- Un bouton dont le texte touche les bords a besoin de padding.
- Deux cartes collées l’une à l’autre ont besoin de marge.
- Une zone cliquable doit être agrandie avec du padding : la marge, elle, n’est pas cliquable.
- Une couleur de fond doit s’étendre au-delà du texte ? C’est du padding, car la marge est transparente.
Vérifier dans le navigateur
Inutile de faire les calculs de tête. Tous les navigateurs proposent des outils de développement accessibles par un clic droit puis « Inspecter ». Dans le panneau des styles, un schéma coloré représente la boîte de l’élément sélectionné, couche par couche, avec les valeurs exactes en pixels.
Prendre l’habitude de consulter ce schéma dès qu’une mise en page se comporte bizarrement fait gagner un temps considérable — et permet de comprendre le problème au lieu de multiplier les essais au hasard.
Conclusion
Le modèle de boîte se résume à quatre couches et à une question : que mesure exactement width ? Passer en border-box, distinguer clairement padding et marge, et garder en tête la fusion des marges verticales suffit à résoudre la majorité des problèmes de mise en page rencontrés au début.
Pour aller plus loin vers les mises en page modernes en Flexbox et Grid, les cours gratuits de programmation web disponibles sur Cursa constituent une suite logique.
