Le modèle de boîte
Tout élément d'une page est une boîte faite de couches emboîtées. Deux d'entre elles se ressemblent beaucoup et se confondent tout le temps : le padding et la margin.
-
4ttr
- Découverte
Tout élément d'une page est une boîte faite de couches emboîtées. Deux d'entre elles se ressemblent beaucoup et se confondent tout le temps : le padding et la margin.
Un paragraphe, un titre, une image, un <div> : pour le navigateur, tout cela est une boîte rectangulaire. Et toute boîte est construite de la même façon, en couches emboîtées.
C'est ce qu'on appelle le modèle de boîte — 🇬🇧 box model. C'est la notion la plus rentable du CSS : une fois comprise, la moitié des mystères de mise en page disparaissent.
À la fin de ce cours, tu seras capable de :
padding et margin sans hésiter.
De l'intérieur vers l'extérieur :
| Couche | Ce que c'est |
|---|---|
| Le contenu | Le texte, l'image — ce que tu as écrit |
| Le padding | L'espace intérieur, entre le contenu et le bord |
| Le border | Le bord lui-même, visible ou non |
| La margin | L'espace extérieur, qui écarte les voisins |
Retiens l'ordre par le schéma : le contenu est au centre, et chaque couche s'ajoute autour.
padding écarte le contenu du bord, à l'intérieur de la boîte.
.intro {
background-color: AliceBlue;
padding: 15px;
}Une seule valeur applique le même espace sur les quatre côtés. Le fond coloré s'étend avec lui : le padding fait partie de la boîte.
Sans padding, un texte se colle contre sa bordure et devient pénible à lire. C'est pour ça que la règle est presque automatique : dès qu'il y a un fond ou une bordure, il faut du padding.
margin pousse les autres éléments loin de la boîte. C'est de l'espace vide en dehors.
.intro {
background-color: AliceBlue;
padding: 15px;
margin-bottom: 30px;
}Le blanc se creuse sous la boîte, mais le fond bleu clair, lui, ne grandit pas.
C'est la confusion classique, et elle se règle avec une seule question :
🧠 À retenir : si l'espace prend la couleur du fond, c'est du padding. S'il reste vide, c'est de la margin.
Une autre façon de le dire : le padding agrandit la boîte, la margin la repousse.
| Tu veux… | Propriété |
|---|---|
| Que le texte ne touche pas le cadre | padding |
| Que deux boîtes ne se touchent pas | margin |
| Agrandir la zone colorée | padding |
| Décoller un bloc du bord de la page | margin |
Les deux propriétés existent en version « un seul côté », avec un tiret :
.alerte {
padding-left: 20px;
margin-top: 40px;
}Les quatre suffixes sont -top, -right, -bottom, -left : haut, droite, bas, gauche.
Il existe aussi des raccourcis, qui font gagner beaucoup de lignes :
| Écriture | Ce que ça veut dire |
|---|---|
padding: 15px; |
15 px sur les quatre côtés |
padding: 10px 20px; |
10 px en haut et en bas, 20 px à gauche et à droite |
margin: 30px 0; |
30 px en haut et en bas, rien sur les côtés |
💡 Astuce : la valeur zéro s'écrit
0, sans unité.0pxfonctionne aussi, mais personne ne l'écrit.
Le bord se pose avec trois valeurs : l'épaisseur, le style, la couleur.
.encadre {
border: 2px solid SteelBlue;
padding: 12px;
}Les styles courants sont solid (trait continu), dashed (tirets) et dotted (pointillés).
Comme le border se glisse entre le padding et la margin, il rend le schéma visible pour de vrai : pose une bordure sur une boîte, et tu vois immédiatement où s'arrête son padding et où commence sa margin.
⚠️ Attention : une bordure sans padding donne toujours un résultat serré et amateur. Les deux se posent ensemble.
padding à une boîte au fond jaune. Le jaune s'agrandit-il ?margin ?padding = espace intérieur, coloré par le fond.margin = espace extérieur, toujours vide.padding-left, margin-top…Tes boîtes ont le bon espacement, mais elles s'étalent encore sur toute la largeur de l'écran. On va leur imposer une limite, puis les centrer.