Comprendre le Modèle de Boîte de Manière Pratique

Chaque élément d'une page web est affiché sous forme de boîte rectangulaire. Chaque boîte se compose de quatre parties :

• Contenu : le texte ou les éléments réels ;
• Rembourrage : espace à l'intérieur de l'élément ;
• Bordure : entoure le contenu et le rembourrage ;
• Marge : espace à l'extérieur de l'élément.

Structure visuelle

Marge → Bordure → Rembourrage → Contenu. La taille totale d'un élément dépend de toutes ces parties.

Contenu

La partie visible de l'élément : texte, images ou autres éléments.

Rembourrage (Espace intérieur)

Crée un espace entre le contenu et la bordure.

.box {
  padding: 20px;
}

Raccourci

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Marge (Espace extérieur)

Crée un espace entre les éléments.

.box {
  margin: 20px;
}

Raccourci

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;

Bordure

Définit le bord de l’élément.

.box {
  border: 4px solid darkblue;
}

Différence clé

• Padding → espace intérieur (affecte l’arrière-plan) ;
• Margin → espace extérieur (n’affecte PAS l’arrière-plan).

Dimensionnement de la boîte

Contrôle la façon dont la largeur et la hauteur sont calculées.

box-sizing: content-box; /* default */
box-sizing: border-box;

• content-box : le padding et la bordure s’ajoutent à la taille ;
• border-box : tout est inclus dans la taille.

Dans les projets réels, border-box est préféré.