Qu'est-ce que le modèle de boîte en CSS?

En CSS, le modèle de boîte décrit une région rectangulaire générée pour chaque élément et utilisée pour calculer ses dimensions et sa position. Il se compose de quatre parties:

• Boîte de contenu: La zone où le contenu de l'élément (texte, images, etc.) est affiché. Sa taille est déterminée par les propriétés width et height.
• Boîte de padding: L'espace entre la bordure du contenu et la bordure de l'élément. Sa taille est déterminée par la propriété padding. La couleur de fond et l'image de l'élément s'étendent à cette zone.
• Boîte de bordure: La bordure de l'élément entourant la boîte de padding. Sa taille est déterminée par la propriété border.
• Boîte de marge: L'espace autour de la bordure de l'élément, le séparant des autres éléments. Sa taille est déterminée par la propriété margin. Cette zone est toujours complètement transparente.

La taille de l'élément par défaut est calculée comme suit:

largeur = width + padding-left + padding-right + border-left-width + border-right-width
hauteur = height + padding-top + padding-bottom + border-top-width + border-bottom-width

La propriété box-sizing permet de modifier ce modèle:

• content-box (par défaut): Les dimensions width et height ne concernent que la boîte de contenu.
• border-box: Les dimensions width et height incluent le padding et la bordure.

.element-default {
  width: 100px; /* Largeur de la boîte de contenu = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Largeur réelle de l'élément: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Largeur réelle de l'élément = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Largeur de la boîte de contenu: 100 - 10 - 10 - 5 - 5 = 70px */
}