Padding CSS
La marge écarte les boîtes. Souvent il faut aussi de la place à l’intérieur — pour que le texte ne colle pas à la bordure et que les boutons soient faciles à toucher. Ce coussin intérieur est padding.
Qu’est-ce que padding ?
Le padding est un espace vide entre le contenu d’un élément et sa bordure. Il vit à l’intérieur de la bordure. Plus de padding éloigne le contenu des bords et la boîte grandit souvent (sauf si vous changez box-sizing plus tard).
Padding vs margin en un coup d’œil
Faciles à confondre. Gardez les rôles séparés.
📊 Padding vs margin
| Outil | Où il siège | Travail quotidien |
|---|---|---|
padding |
Dans la bordure | Coussiner le texte, agrandir la zone cliquable |
margin |
Hors de la bordure | Séparer cette boîte des voisines |
| Fond | Remplit souvent le padding | Couleur/image couvre souvent le coussin |
| Collapse vertical | Le padding ne collapse pas | Les marges de blocs empilés peuvent |
Même padding sur chaque côté
Commencez par une longueur pour une carte calme.
Même padding sur tous les côtés
css.card {
padding: 16px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
margin: 12px; /* écart extérieur — autre outil */
}Ce que vous devez remarquer
Le texte s’éloigne de la bordure grise. Le fond blanc remplit aussi la zone de padding — pas seulement les lettres.
Deux valeurs — vertical, puis horizontal
Deux longueurs associent les côtés opposés : d’abord haut et bas ; ensuite gauche et droite.
Padding vertical puis horizontal
css.panel {
padding: 20px 12px;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}Quatre valeurs — sens horaire depuis le haut
Quand chaque côté veut son coussin : haut → droite → bas → gauche.
Raccourci padding à quatre côtés
css.note {
padding: 8px 16px 24px 16px;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}Les boutons aiment le padding
Le padding agrandit la zone de toucher confortable sans changer la taille du texte du label. Un label court avec un padding généreux paraît moderne et facile à cliquer.
Bouton avec padding
css.btn {
padding: 0.6rem 1.25rem;
border: none;
border-radius: 8px;
background-color: #0f766e;
color: #ffffff;
}Le fond remplit le padding
Contrairement à la marge (extérieur), le padding fait encore partie de la boîte peinte de l’élément. Une couleur ou image de fond couvre souvent la zone de padding.
Zone de padding colorée
css.banner {
padding: 24px;
background-color: #0f766e;
color: #ffffff;
border: 4px solid #042f2e;
}À vous de jouer
- Carte avec
padding: 16pxet bordure visible — le texte ne colle pas au bord. - Réécrivez en
padding: 20px 12pxet sentez coussin plus haut vs plus large. - Bouton avec plus de padding horizontal que vertical.
- Bandeau sarcelle avec grand padding et bordure plus foncée — la couleur remplit le coussin.
- Deux cartes avec seulement
marginentre elles, puis seulementpaddingdans une — sentez les rôles différents.
Erreurs fréquentes
- Utiliser padding pour séparer les boîtes (c’est le travail de margin)
- S’attendre à ce que les paddings entre frères collapsent comme les marges verticales (non)
- Oublier que le fond peint souvent à travers la zone de padding
- Énorme padding de chaque côté quand une échelle modeste se lit mieux
- Mélanger l’ordre des quatre valeurs (haut, droite, bas, gauche)
Résumé
- Padding est l’espace intérieur entre contenu et bordure
- Raccourci : 1, 2 ou 4 valeurs (quatre dans le sens horaire depuis le haut)
- Le fond remplit souvent la zone de padding
- Le padding ne collapse pas comme peuvent les marges verticales
- Boutons et cartes s’appuient sur le padding pour le confort
- Margin reste le cousin extérieur — gardez les deux outils affûtés
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut