.svg)
Qu'est-ce que le Box Model en CSS ?
Le Box Model (modèle de boîte) est le concept fondamental qui régit la mise en page de chaque élément HTML. Chaque élément est représenté comme une boîte rectangulaire composée de quatre zones concentriques : le contenu (content), le remplissage (padding), la bordure (border) et la marge (margin). Comprendre ce modèle est la base absolue du CSS.
Demandes illimitées, résultats rapides
Soumettez autant de briefs que vous le souhaitez. Nos plans vous permettent de gérer un flux continu de demandes design, sans limite et sans friction, et à un coût économique.
Les 4 couches du Box Model
Content : la zone qui contient le texte ou les éléments enfants. Padding : l'espace entre le contenu et la bordure. Border : le cadre visible autour de l'élément. Margin : l'espace extérieur qui sépare l'élément des autres. Par défaut, width et height ne s'appliquent qu'au contenu, ce qui cause souvent des erreurs de dimensionnement.
Box-sizing: border-box
La propriété box-sizing: border-box est devenue un standard — elle inclut padding et border dans les dimensions déclarées. C'est pourquoi la plupart des resets CSS modernes incluent * { box-sizing: border-box; } en tout premier.
Demandes illimitées, résultats rapides
Soumettez autant de briefs que vous le souhaitez. Nos plans vous permettent de gérer un flux continu de demandes design, sans limite et sans friction, et à un coût économique.
Conclusion
Le Box Model est le fondement de toute mise en page CSS. Sa compréhension est indispensable pour dimensionner correctement les éléments et construire des layouts cohérents. L'adoption de box-sizing: border-box simplifie considérablement le travail.
À retenir
- Chaque élément = content + padding + border + margin
- Par défaut, width/height = content uniquement
- box-sizing: border-box inclut padding et border
- Margin collapse : marges verticales adjacentes fusionnent
- Fondement absolu de tout layout CSS
Demandes illimitées, résultats rapides
Soumettez autant de briefs que vous le souhaitez. Nos plans vous permettent de gérer un flux continu de demandes design, sans limite et sans friction, et à un coût économique.
