Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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 lemodè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 (ouzones), définies par leurs bords respectifs : lebord du contenu, lebord du remplissage, lebord de la bordure et lebord de la marge.
Zone de contenu
Lazone 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 lalargeur du contenu (oulargeur de la boîte de contenu) et lahauteur du contenu (ouhauteur 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 surcontent-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éswidth,min-width,max-width,height,min-height etmax-height.
Zone de remplissage
Lazone 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 lalargeur de la boîte de remplissage et lahauteur de la boîte de remplissage.
L'épaisseur du remplissage est déterminée par les propriétéspadding-top,padding-right,padding-bottom,padding-left et la propriété abrégéepadding.
Zone de bordure
Lazone 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 lalargeur de la boîte de bordure et lahauteur de la boîte de bordure.
L'épaisseur des bordures est déterminée par les propriétésborder-width et la propriété abrégéeborder. Si la propriétébox-sizing est définie surborder-box, la taille de la zone de bordure peut être explicitement définie avec les propriétéswidth,min-width,max-width,height,min-height etmax-height. Lorsqu'un arrière-plan (background-color oubackground-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é CSSbackground-clip.
Zone de marge
Lazone 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 lalargeur de la boîte de marge et lahauteur de la boîte de marge.
La taille de la zone de marge est déterminée par les propriétésmargin-top,margin-right,margin-bottom,margin-left et la propriété abrégéemargin. Lorsque lafusion 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
- Disposition et bloc conteneur
- Introduction à la cascade CSS
- Apprendre : Gérer les conflits
- Concepts clés de CSS :