Modèle de boîte CSS

Le module de modèle de boîte CSS définit les propriétés margin et padding, qui, avec la hauteur, la largeur et les propriétés de bordure, composent le modèle de boîte CSS.

Chaque élément visible sur une page web est une boîte disposée selon le 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.

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