Le modèle de boîte
11 min · Débutant · 7 août 2026
Quatre couches concentriques
text
+---------------------------------------+
| marge (margin) |
| +-----------------------------------+ |
| | bordure (border) | |
| | +------------------------------+ | |
| | | padding (espace interne) | | |
| | | +------------------------+ | | |
| | | | contenu | | | |
| | | +------------------------+ | | |
| | +------------------------------+ | |
| +-----------------------------------+ |
+---------------------------------------+padding sépare le contenu de la bordure, margin sépare la bordure des éléments voisins. Les deux se confondent facilement pour un débutant, alors qu’ils se situent de part et d’autre de la bordure.
Le piège de la largeur totale
css
.boite {
width: 200px;
padding: 20px;
border: 5px solid black;
}
/* Largeur totale reellement affichee, par defaut : 200 + 20*2 + 5*2 = 250px */Attention
Par défaut (box-sizing: content-box), width ne s’applique qu’au contenu : le padding et la bordure s’ajoutent en plus, ce qui surprend souvent en découvrant CSS.
border-box : une largeur totale prévisible
css
.boite {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}
/* Largeur totale : exactement 200px, padding et bordure inclus */À toi de jouer
Donne à .boite une largeur de 200px, un padding de 20px, une bordure de 5px solid black, et utilise box-sizing: border-box pour que la largeur totale affichée reste exactement 200px.
html
<!-- HTML -->
<div class="boite">Contenu</div>
/* CSS */
.boite {
/* Complete le style ici */
}