Modèle de boîte CSS

Le module demodèle de boîte CSS définit les propriétésmargin etpadding, qui, avec lahauteur, lalargeur et lespropriétés de bordure, composent lemodèle de boîte CSS.

Chaque élément visible sur une page web est une boîte disposée selonle modèle de mise en forme visuel. Les propriétés CSS définissent leur taille, leur position et leur niveau d'empilement, les propriétés du modèle de boîte (et d'autres) définissent la taille extrinsèque de chaque boîte et l'espace autour d'elles.

Chaque boîte possède une zone de contenu (content en anglais) rectangulaire, à l'intérieur de laquelle sont affichés le texte, les images et tout autre contenu. Le contenu peut être entouré de marge interne (padding en anglais), d'une bordure (border en anglais) et d'une marge (margin en anglais), sur un ou plusieurs côtés. La marge interne entoure le contenu, la bordure entoure la marge interne, et la marge se trouve à l'extérieur de la bordure. Le modèle de boîte décrit comment ces éléments — le contenu, la marge interne, la bordure et la marge — fonctionnent ensemble pour créer une boîte telle qu'affichée par CSS.

Les composants du modèle de boîte CSS

Le module du modèle de boîte CSS définit des propriétés physiques (ou « relatives à la page ») telles quemargin-top etpadding-top. Les propriétés relatives au flux telles quemargin-block-start etmargin-inline-start (qui sont liées à la direction du texte) sont définies dansPropriétés et valeurs logiques. Le module du modèle de boîte est étendu par lemodule de dimensionnement de boîte CSS, qui introduit la valeurtaille intrinsèque et permet de définir lerapport d'aspect pour les éléments dont la taille est automatique dans au moins une dimension.

<box-edge>

Guides

Une introduction au modèle de boîte CSS: Explique l'un des concepts fondamentaux de CSS : le modèle de boîte. Ce modèle définit comment CSS dispose les éléments, y compris leurs zones de contenu, de remplissage, de bordure et de marge.
Maîtriser la fusion des marges: Parfois, deux marges adjacentes sont fusionnées en une seule. Cet article décrit les règles qui gouvernent quand et pourquoi cela se produit, et comment le contrôler.
Le modèle de mise en forme visuel: Explique le modèle de mise en forme visuel.