Qu'est-ce que le modèle en boîte, de quoi est-il…

Le modèle de boîte (Modèle de boîte CSS) est une entité abstraite décrivant comment les éléments HTML sont représentés sur la page sous forme de blocs rectangulaires. Il définit la taille et la disposition du contenu, des marges internes, des bordures et des marges externes de l’élément.

Le modèle de boîte se compose des parties suivantes :

Contenu : Le contenu de l’élément (texte, images, etc.). Sa taille est déterminée par les propriétés width et height.
Padding (Rembourrage) : L’espace entre le contenu de l’élément et sa bordure. Il est défini par les propriétés padding-top, padding-right, padding-bottom, padding-left ou la propriété abrégée padding.
Bordure (Border) : La bordure autour du rembourrage interne et du contenu. Elle est définie par les propriétés border-width, border-style, border-color ou la propriété abrégée border.
Marge (Margin) : L’espace entre la bordure de l’élément et les éléments externes. Elle est définie par les propriétés margin-top, margin-right, margin-bottom, margin-left ou la propriété abrégée margin.

Il existe deux principaux types de modèle de boîte, déterminés par la propriété box-sizing :

content-box (valeur par défaut) : La largeur et la hauteur de l’élément, définies par les propriétés width et height, ne concernent que la zone de contenu. Le padding et la border s’ajoutent à ces tailles, augmentant la taille totale de l’élément.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Ajoute 20px à la taille totale sur chaque axe */
  border: 2px solid black; /* Ajoute 4px à la taille totale sur chaque axe */
  box-sizing: content-box; /* Comportement par défaut */
}
/* La taille totale de l’élément sera de 124px sur 124px */

border-box : La largeur et la hauteur de l’élément, définies par les propriétés width et height, incluent le contenu, le padding et la border. Le padding et la border n’augmentent pas la taille totale de l’élément, mais le "compressent" dans la zone de contenu.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Inclus dans la largeur/hauteur totale */
  border: 2px solid black; /* Inclus dans la largeur/hauteur totale */
  box-sizing: border-box;
}
/* La taille totale de l’élément sera de 100px sur 100px */

On utilise plus fréquemment border-box pour un comportement de taille plus prévisible lors de l’ajout de padding et de border. Cela est utile, par exemple, lors de la création de mises en page adaptatives où les éléments doivent occuper une largeur en pourcentage déterminée.

Qu'est-ce que le modèle en boîte, de quoi est-il composé et quels sont ses types?