margin vs padding
margin est un espace transparent à l’extérieur de l’élément. padding est l’espace à l’intérieur de la bordure, entre le contenu et le bord, et prend le fond de l’élément.
Comparaison point par point
#Position par rapport à la bordure
Affiche le fond de l’élément
Valeurs négatives
Fusion avec le voisin (collapsing)
Centrage d’un bloc
Utilisation typique
Exemple
#.card {
margin-bottom: 16px;
padding: 16px;
border: 1px solid #3f3f46;
border-radius: 10px;
}<div class="stage" style="padding: 0; background: repeating-linear-gradient(45deg, rgba(245,158,11,.12) 0 6px, transparent 6px 12px);">
<div class="card box" style="width: auto; display: block; margin: 16px;">Le padding éloigne le contenu du bord, le margin éloigne toute la carte du fond.</div>
</div>Définition et utilisation
#Ces deux propriétés ajoutent de l’espace libre, mais à un endroit différent du modèle de boîte. margin se situe en dehors de la bordure de l’élément et le sépare de ses voisins, c’est pourquoi il est toujours transparent : on voit au travers ce qu’il y a en dessous. padding se situe à l’intérieur de la bordure, entre le contenu et le bord, donc il hérite du fond et de la couleur de l’élément : un bouton avec du padding "respire", car le fond s’étend avec lui.
La différence se voit aussi dans le comportement. margin peut être négatif, ce qui rapproche ou superpose les éléments, et les marges verticales de deux blocs voisins fusionnent parfois en un seul espace plus grand (collapsing). padding n’est jamais négatif et ne fusionne jamais avec rien.
En pratique, le choix est simple : l’espace entre des cartes, des paragraphes ou des éléments de liste, c’est margin, ou encore mieux dans les conteneurs flex et grid, la propriété gap. L’espace entre le contenu d’un bouton, d’un champ ou d’une carte et son bord, c’est padding.
Syntaxe
#margin: <haut> <droite>? <bas>? <gauche>?;
padding: <haut> <droite>? <bas>? <gauche>?;Plus d’exemples
#.avatar {
margin-left: -12px;
border: 2px solid #0c0c10;
}
.avatar:first-child {
margin-left: 0;
}<div class="stage" style="display: flex;">
<span class="box avatar" style="border-radius: 999px; margin-left: 0;">A</span>
<span class="box avatar" style="border-radius: 999px; margin-left: -12px; border: 2px solid #0c0c10;">N</span>
<span class="box avatar" style="border-radius: 999px; margin-left: -12px; border: 2px solid #0c0c10;">K</span>
</div>Une marge négative superpose les avatars, comme dans le motif populaire "qui est en ligne".
.button-tight {
padding: 2px 4px;
}
.button-comfy {
padding: 10px 18px;
}<div class="stage" style="display: flex; gap: 10px; align-items: center;">
<button class="button-tight" style="border: 0; border-radius: 6px; background: #7c3aed; color: #fff;">Petit</button>
<button class="button-comfy" style="border: 0; border-radius: 10px; background: #7c3aed; color: #fff;">Confortable</button>
</div>Sur un téléphone, la zone cliquable devrait mesurer au moins environ 44px, et c’est justement le padding qui la détermine.
Bonnes pratiques
#- Réglez les espaces entre les éléments d’une liste, des cartes ou des champs de formulaire avec le
gapdu conteneur, plutôt qu’avec des marges sur chaque élément. - Si un élément "disparaît" sous son voisin ou devient trop grand, vérifiez d’abord le padding : avec
box-sizing: content-box, il agrandit l’élément au-delà dewidth. - La marge entre des sections peut être imprévisible à cause du collapsing. En cas de doute, vérifiez le résultat dans les outils de développement.
Entrées associées
#- marginDéfinit l’espace extérieur d’un élément par rapport à ses voisins.
- paddingDéfinit l’espace intérieur entre le contenu et la bordure.
- gapDéfinit l’espace entre les éléments d’un conteneur flex, grid ou multi-colonnes.
- box-sizingDécide si width et height incluent la marge intérieure et la bordure.
- borderRaccourci qui définit l’épaisseur, le style et la couleur d’une bordure.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.