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

Le modèle de boîte en CSS décrit comment la taille occupée par un élément sur une page web est calculée. Il comprend :

• Contenu : La zone pour le contenu réel de l'élément (texte, images).
• Padding (rembourrage) : Espace entre le contenu et la bordure de l'élément.
• Bordure : La bordure entourant le padding et le contenu.
• Marge : Espace autour de la bordure de l'élément, séparant cet élément des autres.

La taille de l'élément par défaut (dans le modèle standard box-sizing: content-box) est déterminée par la somme des tailles du contenu, padding et bordure. La marge est ajoutée à l'espace total occupé, mais n'affecte pas la taille de l'élément lui-même.

La propriété box-sizing: border-box modifie le calcul de la taille de l'élément, incluant padding et bordure dans la largeur et la hauteur totales. Dans ce cas, la taille de l'élément est déterminée par width/height, et le padding et la bordure "consomment" de l'espace du contenu.

/* Modèle standard (par défaut) */
.element-content-box {
  width: 100px; /* Taille du contenu */
  padding: 10px;
  border: 5px solid black;
  /* Largeur totale : 100px (contenu) + 10px (padding gauche) + 10px (padding droit) + 5px (bordure gauche) + 5px (bordure droit) = 130px */
}

/* Modèle border-box */
.element-border-box {
  width: 100px; /* Largeur totale : contenu + padding + bordure */
  padding: 10px;
  border: 5px solid black;
  /* Taille du contenu : 100px - 10px (padding gauche) - 10px (padding droit) - 5px (bordure gauche) - 5px (bordure droit) = 70px */
}

Comprendre le modèle de boîte est essentiel pour positionner et composer précisément les éléments sur une page.