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).
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).
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.
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 !
box-sizing: border-box ?width: 200px; padding: 20px; border: 5px solid; (sans border-box) fait quelle largeur réelle ?