Tout est une boîte
En CSS, chaque élément HTML est une boîte rectangulaire. Même un texte, même un lien, même une image. Cette boîte est composée de 4 couches, de l'intérieur vers l'extérieur :
- Content : le contenu (texte, image...)
- Padding : l'espace intérieur entre le contenu et la bordure
- Border : la bordure de la boîte
- Margin : l'espace extérieur entre la boîte et ses voisins
Astuce mnémotechnique : padding = rembourrage intérieur (comme le rembourrage d'un coussin), margin = marge extérieure (comme les marges d'une page).
box-sizing : le piège classique
Par défaut, quand vous écrivez width: 200px, le navigateur applique 200px au contenu seulement. Le padding et la border s'ajoutent en plus ! Un élément de 200px avec 20px de padding et 2px de border fait en réalité 244px de large.
La solution : box-sizing: border-box. Avec cette propriété, width: 200px inclut le padding ET la border. L'élément fait vraiment 200px.
Avant de dérouler : Cette règle CSS utilise le comportement par défaut du navigateur. Quelle largeur totale cette boîte occupe-t-elle réellement à l'écran : 300 px, ou davantage ?.boite { width: 300px; padding: 20px; border: 5px solid; }
Voir la réponse
La boîte occupe 350 px de large, pas 300. Par défaut (box-sizing: content-box), la width ne fixe que la zone de contenu ; le padding (20 px de chaque côté, soit +40) et la bordure (5 px de chaque côté, soit +10) viennent s'ajouter par-dessus : 300 + 40 + 10 = 350 px. C'est le piège classique qui fait déborder les mises en page. La parade : box-sizing: border-box, qui fait que la width inclut le padding et la bordure (la boîte reste à 300 px, le contenu se réduit pour compenser).
Ajoutez toujours cette règle en haut de votre CSS : *, *::before, *::after { box-sizing: border-box; }. Tous les développeurs le font.
Dimensions : width, height, max-width
width/height: largeur et hauteur fixesmax-width: largeur maximale (l'élément peut être plus petit)min-height: hauteur minimale (l'élément peut grandir)
max-width est préférable à width pour le responsive : l'élément s'adapte aux petits écrans.
Padding vs Margin
La confusion est fréquente. Voici la règle simple :
- Padding : espace entre le contenu et la bordure. La couleur de fond s'étend dans le padding.
- Margin : espace entre la bordure et les éléments voisins. Le margin est toujours transparent.
Les deux acceptent la même syntaxe : padding: 10px 20px (haut/bas gauche/droite) ou margin: 10px 20px 10px 20px (haut droite bas gauche, sens des aiguilles d'une montre).
margin: 10px 20px 30px 40px.Everything is a box
In CSS, every HTML element is a rectangular box. Even text, even a link, even an image. This box is made of 4 layers, from inside to outside:
- Content — the content (text, image...)
- Padding — the inner space between content and border
- Border — the box's border
- Margin — the outer space between the box and its neighbors
Memory trick: padding = inner cushioning (like a pillow's stuffing), margin = outer space (like page margins).
box-sizing: the classic trap
By default, when you write width: 200px, the browser applies 200px to the content only. Padding and border are added on top! A 200px element with 20px padding and 2px border is actually 244px wide.
The solution: box-sizing: border-box. With this property, width: 200px includes padding AND border. The element is really 200px.
Before you scroll down: This CSS rule uses the browser's default behaviour. What total width does this box actually occupy on screen: 300 px, or more?.box { width: 300px; padding: 20px; border: 5px solid; }
See the answer
The box occupies 350 px wide, not 300. By default (box-sizing: content-box), width only sets the content area; padding (20 px on each side, +40 total) and border (5 px on each side, +10 total) are added on top: 300 + 40 + 10 = 350 px. This is the classic trap that causes layouts to overflow. The fix: box-sizing: border-box, which makes width include padding and border (the box stays 300 px wide, the content shrinks to compensate).
Always add this rule at the top of your CSS: *, *::before, *::after { box-sizing: border-box; }. Every developer does it.
Dimensions: width, height, max-width
width/height— fixed width and heightmax-width— maximum width (element can be smaller)min-height— minimum height (element can grow)
max-width is preferable to width for responsive design: the element adapts to small screens.
Padding vs Margin
The confusion is common. Here's the simple rule:
- Padding — space between content and border. Background color extends into padding.
- Margin — space between border and neighboring elements. Margin is always transparent.
Both accept the same syntax: padding: 10px 20px (top/bottom left/right) or margin: 10px 20px 10px 20px (top right bottom left, clockwise).
margin: 10px 20px 30px 40px.🎯 Pratique
S'entraîner (clique pour ouvrir) :
✨ Prompt IA
Copiez ce prompt dans Claude ou ChatGPT :
Explique-moi la différence entre content-box et border-box avec un schéma ASCII et un exemple concret où content-box pose problème.
💬 Ré-explique sans regarder
Sans relire la réponse de l'IA : avec tes mots, qu'est-ce que change box-sizing: border-box dans le calcul de la largeur d'un élément ?
content-box), width ne mesure que le contenu, et padding + border s'ajoutent par-dessus (un bloc de width: 200px avec 20px de padding et 2px de border occupe 244px). Avec border-box, width inclut le padding et la border : l'élément fait exactement la valeur déclarée, et c'est le contenu qui rétrécit. C'est pour ça qu'on met *, *::before, *::after { box-sizing: border-box; } au départ.L'IA a confondu padding et margin. Le padding est utilisé pour écarter les cartes entre elles (ce devrait être du margin) et le margin est utilisé pour l'espace intérieur (ce devrait être du padding). Inversez-les !
⚖️ Juge le code de l'IA
Tu as demandé à l'IA une carte de 300px de large avec du padding et une bordure. Elle te propose ce CSS. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.
.card {
width: 300px;
padding: 24px;
border: 2px solid #ccc;
}box-sizing: border-box, cette carte ne fait pas 300px : width ne mesure que le contenu, donc le rendu réel est 300 + 24×2 (padding) + 2×2 (border) = 352px. Sur une grille ou dans une colonne de 300px, elle déborde. Le correctif pro : ajouter box-sizing: border-box; (idéalement via la règle globale *, *::before, *::after) pour que la carte fasse vraiment 300px, padding et bordure compris.🧠 Rappel libre
Sans remonter dans la leçon : quelle est la différence entre padding et margin, et lequel des deux la couleur de fond remplit-elle ?
padding est l'espace intérieur, entre le contenu et la bordure ; le margin est l'espace extérieur, entre la bordure et les éléments voisins. La couleur de fond (background) s'étend dans le padding mais jamais dans le margin, qui reste toujours transparent.box-sizing: border-box ?width: 200px; padding: 20px; border: 5px solid; (sans border-box) fait quelle largeur réelle ?Chaque élément a maintenant sa boîte bien dimensionnée. Mais par défaut, tout s'empile sagement de haut en bas. Dans la prochaine leçon, on apprend à déplacer les éléments avec le positionnement : relative, absolute, fixed et sticky pour les sortir du flux normal.
Leçon 4 : Positionnement →