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.
Bonne pratique : 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.
Best practice: 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.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.
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 !
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.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 ?Every element now has a properly sized box. But by default everything stacks neatly from top to bottom. In the next lesson you will learn to move elements around with positioning: relative, absolute, fixed and sticky to break them out of the normal flow.
Lesson 4: Positioning →