Docs CSS exécutables : Margin vs padding

Q: Le padding ou la margin augmentent-ils la taille de l'élément ?

Le padding, oui, avec box-sizing: content-box (par défaut) : il s'ajoute à la largeur et à la hauteur. La margin ne s'ajoute jamais à la taille de l'élément ; elle ajoute de l'espace autour (un bloc en width: auto devient même plus étroit, car ses marges prennent une partie de la largeur disponible). Avec box-sizing: border-box, le padding est au contraire pris à l'intérieur de la largeur.

La différence en une image

Le padding est à l'intérieur de la bordure. La margin est à l'extérieur. Les deux boîtes ci-dessous ont le même contenu et la même valeur de 24px ; seule la propriété change. Le gris est le conteneur derrière elles.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

Avec le padding, les 24px sont bleus : ils font partie de la boîte, à l'intérieur de la bordure, et la boîte grandit. Avec la margin, les 24px sont gris : la boîte reste serrée autour de son texte et l'espace extérieur repousse les bords du conteneur.

Essayez les deux sur une même boîte

Déplacez les deux curseurs. Le padding agrandit la boîte bleue ; la margin éloigne la boîte des bords gris sans la modifier.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Regardez la ligne de taille : elle change quand vous déplacez le curseur du padding et reste la même quand vous déplacez celui de la margin.

Margin vs padding en un coup d'œil

	Padding	Margin
Emplacement	À l'intérieur de la bordure	À l'extérieur de la bordure
Fond	Affiche le fond de l'élément	Toujours transparente
Fait partie de la zone cliquable	Oui	Non
S'ajoute à la taille de l'élément	Oui, en `content-box`	Non
Peut valoir `auto`	Non	Oui (`margin: 0 auto` centre)
Peut être négatif	Non	Oui
Les valeurs verticales fusionnent	Jamais	Oui, les marges verticales adjacentes fusionnent
Pourcentages relatifs à	La largeur du bloc conteneur	La largeur du bloc conteneur
Usage typique	Espace à l'intérieur des boutons, cartes, champs	Espace entre éléments, centrage

Chaque propriété a sa propre page avec tous les détails : padding CSS et margin CSS.

Lequel utiliser

Posez-vous une question : l'espace appartient-il à l'élément, ou se trouve-t-il entre des éléments ?

L'espace autour du libellé d'un bouton, l'intérieur d'une carte, l'espace entre le texte d'un champ et sa bordure : padding. Il prend le fond et agrandit la cible.
L'espace entre deux paragraphes, entre des cartes, autour d'une section : margin, ou gap quand le parent est un conteneur flex ou grid.

C'est pour la zone cliquable que le choix compte le plus. Les deux liens ci-dessous occupent la même place sur la page, mais l'espace du premier est du padding et celui du second de la margin. Seul le premier est facile à atteindre :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

Le contour ambre en pointillés est le bord de l'élément, c'est-à-dire la zone qui réagit aux clics et aux touchers. La margin autour du second lien est un espace vide qui ne fait rien.

L'espace entre les éléments : margin ou gap

Pour une ligne ou une grille d'éléments, gap sur le parent flex ou grid est en général plus propre que des marges sur chaque enfant : il ne se place qu'entre les éléments, jamais avant le premier ni après le dernier, il n'y a donc rien à annuler.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Ici, le conteneur gris utilise du padding (l'espace à l'intérieur, en gris), les éléments utilisent du padding (l'espace à l'intérieur de chacun, en vert), et gap gère l'espace entre eux.

Erreurs courantes

Utiliser la margin pour un espace qui devrait être coloré. La margin est transparente. Si l'espace doit afficher le fond, c'est du padding.
Utiliser la margin pour agrandir un lien. La zone cliquable s'arrête à la bordure ; utilisez le padding.
S'attendre à ce que deux marges verticales de 20px donnent 40px. Les marges verticales adjacentes fusionnent en 20px. Le padding ne fusionne jamais.
Essayer padding: auto pour centrer. Seule la margin accepte auto.
Oublier que le padding agrandit la boîte. Ajoutez box-sizing: border-box pour que width l'inclue.

Questions fréquentes

Quelle est la différence entre margin et padding ?

Le padding est l'espace entre le contenu d'un élément et sa bordure, à l'intérieur de l'élément. La margin est l'espace à l'extérieur de la bordure, entre l'élément et ses voisins. Le padding affiche le fond de l'élément ; la margin est toujours transparente.

Quand utiliser le padding plutôt que la margin ?

Utilisez le padding pour l'espace qui appartient à l'élément : l'espace autour du texte d'un bouton, l'intérieur d'une carte, tout ce qui doit partager le fond ou être cliquable. Utilisez la margin (ou gap en flex et grid) pour l'espace entre des éléments distincts.

Le padding ou la margin augmentent-ils la taille de l'élément ?

Le padding, oui, avec box-sizing: content-box (par défaut) : il s'ajoute à la largeur et à la hauteur. La margin ne s'ajoute jamais à la taille de l'élément ; elle ajoute de l'espace autour (un bloc en width: auto devient même plus étroit, car ses marges prennent une partie de la largeur disponible). Avec box-sizing: border-box, le padding est au contraire pris à l'intérieur de la largeur.

Le padding peut-il être négatif comme la margin ?

Non. Un padding négatif est invalide et ignoré, alors que les marges négatives sont autorisées et peuvent faire se chevaucher des éléments. Le padding ne peut pas non plus valoir auto, c'est pourquoi le centrage utilise margin: 0 auto.

Concepts liés