Box model (CSS)
Le box model CSS décrit comment chaque élément d'une page est rendu sous forme de boîte rectangulaire, composée de quatre couches : le contenu, le padding, la bordure et la marge. Ensemble, elles déterminent la taille d'un élément et l'espace qui l'entoure, ce qui fait du box model la base de toute mise en page CSS.
Les quatre couches
- Contenu : le texte ou l'image, dimensionné par la largeur et la hauteur.
- Padding : l'espace entre le contenu et la bordure, à l'intérieur de la boîte.
- Bordure : le trait autour du padding.
- Marge : l'espace à l'extérieur de la bordure, qui sépare l'élément de ses voisins.
On peut inspecter les quatre couches dans les outils de développement de n'importe quel navigateur, où le schéma du box model affiche la valeur en pixels de chaque couche.
box-sizing : content-box ou border-box
La propriété box-sizing décide si la largeur et la hauteur incluent le padding et la bordure. Cette différence est la première source de surprises de dimensionnement.
| Comportement | content-box (défaut) | border-box |
|---|---|---|
| width couvre | Le contenu seul | Contenu + padding + bordure |
| Boîte 200px + 20px padding | Rendu 240px de large | Rendu 200px de large |
| Prévisibilité | Surprenante | Prévisible |
La plupart des projets définissent box-sizing: border-box globalement avec *, *::before, *::after { box-sizing: border-box; }.
La fusion des marges
Les marges verticales entre deux éléments de bloc peuvent fusionner en une seule marge égale à la plus grande des deux, au lieu de s'additionner. C'est un comportement attendu mais souvent surprenant, et il ne se produit pas dans un conteneur flex ou grid.
Problèmes courants et bonnes pratiques
La plupart des surprises de dimensionnement viennent du comportement content-box par défaut. Définissez box-sizing: border-box une fois, utilisez le padding pour l'espace intérieur et la marge pour l'espace extérieur, et gardez des valeurs sur une échelle cohérente pour que l'espacement reste prévisible.
Le box model et la mise en page moderne
Flexbox et grid changent la façon de gérer l'espacement : leur propriété gap espace les enfants sans les pièges de la fusion des marges, si bien qu'utiliser gap plutôt que des marges par élément garde des mises en page plus propres et plus faciles à maintenir.
Le box model chez BeBranded
Chez BeBranded, nous partons d'une base box-sizing cohérente pour que les espacements restent fiables sur chaque écran et chaque composant. Cela fait partie du front-end propre et maintenable de notre travail de design.
FAQ
Qu'est-ce que le box model CSS ?
Quelles sont les parties du box model ?
Qu'est-ce que box-sizing: border-box ?
Quelle différence entre padding et marge ?
Pourquoi mon élément est-il plus large que la largeur définie ?
Comment Webflow gère-t-il le box model ?
Outils associés
