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

Le modèle de boîte CSS décrit comment les éléments s'affichent sur la page sous forme de blocs rectangulaires. Il se compose de quatre zones ou couches qui se superposent, en commençant par le contenu :

1. Contenu : La zone où se trouve le contenu réel de l'élément (texte, images, etc.). Sa taille est déterminée par les propriétés width et height.

2. Padding (Rembourrage) : La zone transparente entre le contenu et la bordure de l'élément. Elle est définie par les propriétés padding-top, padding-right, padding-bottom, padding-left ou l'abréviation padding.

3. Bordure (Border) : La ligne entourant le padding et le contenu. Son style, son épaisseur et sa couleur sont définis par les propriétés border-width, border-style, border-color ou par des abréviations comme border.

4. Marge (Margin) : La zone transparente autour de la bordure de l'élément, qui le sépare des autres éléments. Elle est définie par les propriétés margin-top, margin-right, margin-bottom, margin-left ou l'abréviation margin. Les marges de blocs adjacents peuvent se chevaucher.

Le comportement standard, décrit par box-sizing: content-box (par défaut), détermine que les propriétés width et height ne concernent que le contenu (Content). Le padding et la border s'ajoutent à cette taille, augmentant la taille totale de l'élément.

En utilisant box-sizing: border-box, les propriétés width et height incluent le contenu, le padding et la border. La marge est toujours ajoutée à la taille totale de l'élément, indépendamment de box-sizing.

Exemple :

div {
  width: 100px; /* Largeur du contenu (pour content-box) ou de l'ensemble de l'élément (pour border-box) */
  height: 50px; /* Hauteur du contenu (pour content-box) ou de l'ensemble de l'élément (pour border-box) */
  padding: 10px; /* Rembourrage intérieur */
  border: 2px solid black; /* Bordure */
  margin: 15px; /* Marge extérieure */
}

Selon la valeur de box-sizing, les dimensions réelles de l'élément seront différentes.

• box-sizing: content-box : La largeur réelle = 100px (contenu) + 10px (padding gauche) + 10px (padding droit) + 2px (border gauche) + 2px (border droit) = 124px. La hauteur réelle = 50px (contenu) + 10px (padding supérieur) + 10px (padding inférieur) + 2px (border supérieur) + 2px (border inférieur) = 74px.
• box-sizing: border-box : La largeur réelle = 100px (contenu + padding + border). La hauteur réelle = 50px (contenu + padding + border).

La marge extérieure margin: 15px est ajoutée autour de cette taille totale.