Le modèle de boîte

Comprenez comment chaque élément est une boîte faite de contenu, de padding, de bordure et de margin, et maîtrisez box-sizing.

10 min · 3 questions

En CSS, chaque élément de la page est une boîte rectangulaire, même si on ne la voit pas. Cette boîte a quatre couches, comme un tableau encadré accroché au mur : le contenu (l'image du tableau), le padding (la marge blanche entre l'image et le cadre), la border (le cadre lui-même) et la margin (l'espace vide entre le cadre et les autres tableaux du mur). C'est ce que l'on appelle le modèle de boîte (box model).

Trois propriétés pilotent ces couches. padding règle l'espace intérieur, entre le contenu et la bordure. border dessine la bordure : on lui donne une épaisseur, un style (solid pour un trait plein) et une couleur. margin règle l'espace extérieur, qui repousse les éléments voisins. Toutes ces distances s'expriment en pixels (px).

.card {
  padding: 16px;
  border: 2px solid black;
  margin: 24px;
}

Vous pouvez régler chaque côté séparément avec padding-top (haut), padding-right (droite), padding-bottom (bas) et padding-left (gauche), et de même pour margin. Il existe aussi des raccourcis : avec deux valeurs, la première s'applique en haut et en bas, la seconde à gauche et à droite. Ainsi padding: 8px 16px; signifie 8 pixels en haut et en bas, 16 pixels à gauche et à droite.

.card {
  padding: 8px 16px;
  margin-top: 32px;
  margin-bottom: 8px;
}

Un piège classique : par défaut, quand vous écrivez width: 200px; (la propriété width fixe la largeur), les 200 pixels ne concernent que le contenu. Le padding et la bordure s'ajoutent par-dessus ! Une boîte avec width: 200px, padding: 16px et border: 2px occupe en réalité 200 + 16 + 16 + 2 + 2 = 236 pixels de large. La propriété box-sizing: border-box; corrige cela : la largeur annoncée inclut alors le padding et la bordure. La boîte fait vraiment 200 pixels, c'est le contenu qui se réduit.

* {
  box-sizing: border-box;
}

.card {
  width: 200px;
  padding: 16px;
  border: 2px solid black;
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Quelle propriété règle l'espace entre le contenu d'une boîte et sa bordure ?
   • margin
   • padding
   • border
   • width
2. Sans box-sizing: border-box, quelle largeur totale occupe une boîte avec width: 100px, padding: 10px et border: 5px solid black ?
   • 100 pixels
   • 115 pixels
   • 130 pixels
   • 110 pixels
3. Que signifie le raccourci margin: 10px 20px; ?
   • 10 px à gauche et à droite, 20 px en haut et en bas
   • 10 px en haut et en bas, 20 px à gauche et à droite
   • 10 px en haut, 20 px en bas