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.
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
- Disposition et bloc conteneur
- Introduction à la cascade CSS
- Apprendre : Gérer les conflits
- Concepts clés de CSS :