Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Introduction au modèle de boîte CSS

Lors de la mise en page d'un document, le moteur de rendu du navigateur représente chaque élément sous la forme d'une boîte rectangulaire selon le modèle de boîte CSS de base. CSS définit la taille, la position et les propriétés (couleur, arrière-plan, taille de la bordure, etc.) de ces boîtes.

Chaque boîte est composée de quatre parties (ou zones), définies par leurs bords respectifs : le bord du contenu, le bord du remplissage, le bord de la bordure et le bord de la marge.

Modèle de boîte CSS

Zone de contenu

La zone de contenu, délimitée par le bord du contenu, contient le contenu « réel » de l'élément, comme du texte, une image ou un lecteur vidéo. Ses dimensions sont la largeur du contenu (ou largeur de la boîte de contenu) et la hauteur du contenu (ou hauteur de la boîte de contenu). Elle possède souvent une couleur d'arrière-plan ou une image d'arrière-plan.

Si la propriété box-sizing est définie sur content-box (valeur par défaut) et si l'élément est un élément de type bloc, la taille de la zone de contenu peut être explicitement définie avec les propriétés width, min-width, max-width, height, min-height et max-height.

Zone de remplissage

La zone de remplissage, délimitée par le bord du remplissage, étend la zone de contenu pour inclure le remplissage de l'élément. Ses dimensions sont la largeur de la boîte de remplissage et la hauteur de la boîte de remplissage.

L'épaisseur du remplissage est déterminée par les propriétés padding-top, padding-right, padding-bottom, padding-left et la propriété abrégée padding.

Zone de bordure

La zone de bordure, délimitée par le bord de la bordure, étend la zone de remplissage pour inclure les bordures de l'élément. Ses dimensions sont la largeur de la boîte de bordure et la hauteur de la boîte de bordure.

L'épaisseur des bordures est déterminée par les propriétés border-width et la propriété abrégée border. Si la propriété box-sizing est définie sur border-box, la taille de la zone de bordure peut être explicitement définie avec les propriétés width, min-width, max-width, height, min-height et max-height. Lorsqu'un arrière-plan (background-color ou background-image) est défini sur une boîte, il s'étend jusqu'au bord extérieur de la bordure (c'est-à-dire qu'il passe sous la bordure dans l'ordre des couches). Ce comportement par défaut peut être modifié avec la propriété CSS background-clip.

Zone de marge

La zone de marge, délimitée par le bord de la marge, étend la zone de bordure pour inclure une zone vide utilisée pour séparer l'élément de ses voisins. Ses dimensions sont la largeur de la boîte de marge et la hauteur de la boîte de marge.

La taille de la zone de marge est déterminée par les propriétés margin-top, margin-right, margin-bottom, margin-left et la propriété abrégée margin. Lorsque la fusion des marges se produit, la zone de marge n'est pas clairement définie car les marges sont partagées entre les boîtes.

Enfin, notez que pour les éléments en ligne non remplacés, l'espace occupé (la contribution à la hauteur de la ligne) est déterminé par la propriété line-height, même si les bordures et le remplissage sont toujours affichés autour du contenu.

Voir aussi