Docs CSS exécutables : Margin CSS

Ce qu'est la margin

La margin est l'espace à l'extérieur de la bordure d'un élément. Elle est toujours transparente, et son rôle est d'éloigner les autres éléments. Dans l'exemple, le conteneur gris se voit à travers la margin autour de la boîte bleue :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin</title>
  <style>
    .container {
      display: flow-root; /* keeps the child's margin inside the gray area */
      background: #e5e7eb;
    }
    .box {
      margin: 24px;
      padding: 12px;
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">24px of margin on every side (the gray)</div>
  </div>
</body>
</html>

La bande grise ne fait pas partie de la boîte : le fond de la boîte s'arrête à sa bordure. Pour un espace qui prend le fond de l'élément, utilisez le padding.

Le raccourci margin

margin accepte de une à quatre valeurs, dans le même ordre horaire que padding :

Déclaration	Haut	Droite	Bas	Gauche
`margin: 10px;`	10	10	10	10
`margin: 10px 20px;`	10	20	10	20
`margin: 10px 20px 30px;`	10	20	30	20
`margin: 10px 20px 30px 40px;`	10	20	30	40

Chaque côté a aussi sa propre propriété (margin-top, margin-right, margin-bottom, margin-left) et des versions logiques qui suivent le sens du texte (margin-inline-start, margin-inline-end, margin-block, margin-inline).

Contrairement à padding, margin accepte auto et les valeurs négatives :

Valeur	Exemple	Remarques
Longueur	`16px`, `1.5rem`	La plus courante
Pourcentage	`5%`	De la largeur du bloc conteneur, pour les quatre côtés
`auto`	`margin: 0 auto`	Le navigateur remplit l'espace restant
Négative	`margin-top: -10px`	Rapproche l'élément ou son voisin, peut créer un chevauchement

Centrer avec margin: 0 auto

margin: 0 auto est la façon classique de centrer un bloc horizontalement. auto des deux côtés demande au navigateur de partager l'espace restant à parts égales. Il faut une largeur inférieure à celle du conteneur, sinon il ne reste rien à partager :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    .page {
      max-width: 300px;
      margin: 0 auto;
      background: #2563eb;
      color: white;
      padding: 12px;
    }
    .end {
      width: 160px;
      margin-left: auto; /* all the leftover space goes on the left */
      background: #16a34a;
      color: white;
      padding: 8px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <div class="page">Centered with margin: 0 auto</div>
  <div class="end">Pushed to the end</div>
</body>
</html>

Les marges auto ne centrent pas verticalement dans le flux normal (les marges auto verticales valent 0) et n'ont aucun effet sur les éléments inline. Pour une vue d'ensemble du centrage, voir comment centrer une div.

La fusion des marges

Quand deux marges verticales se touchent, elles ne s'additionnent pas. Le navigateur ne garde que la plus grande. Ici, la première boîte a margin-bottom: 30px et la seconde margin-top: 20px, et l'écart entre elles est de 30px, pas de 50px :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin collapsing</title>
  <style>
    .box { background: #2563eb; color: white; padding: 10px; }
    .a { margin-bottom: 30px; }
    .b { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="box a">margin-bottom: 30px</div>
  <div class="box b">margin-top: 20px</div>
  <p id="gap"></p>
  <script>
    const a = document.querySelector('.a').getBoundingClientRect();
    const b = document.querySelector('.b').getBoundingClientRect();
    document.getElementById('gap').textContent = 'Gap: ' + (b.top - a.bottom) + 'px';
  </script>
</body>
</html>

La fusion est voulue : elle permet aux paragraphes et aux titres de porter chacun leur espacement sans le doubler là où ils se rencontrent. Elle surprend dans un second cas, quand la marge du haut d'un enfant s'échappe de son parent :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent collapse</title>
  <style>
    .parent { background: #e5e7eb; margin-bottom: 16px; }
    .child { margin-top: 30px; background: #f59e0b; padding: 8px; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent"><div class="child">Margin escaped: no gray above me</div></div>
  <div class="parent fixed"><div class="child">flow-root: 30px of gray above me</div></div>
</body>
</html>

Dans le premier parent, la marge de 30px de l'enfant a fusionné à travers le bord supérieur du parent : elle pousse tout le parent vers le bas au lieu de créer un espace gris à l'intérieur. L'une de ces solutions l'empêche :

display: flow-root sur le parent (contrairement à overflow: hidden, il ne rogne rien).
Un padding ou une bordure sur le bord supérieur du parent.
Un parent flex ou grid : les marges des éléments flex et grid ne fusionnent jamais.

Les marges horizontales ne fusionnent jamais, pas plus que les marges des éléments flottants ou positionnés en absolu.

Les marges négatives

Une marge négative tire dans la direction opposée. Du côté du haut ou du début, elle déplace l'élément lui-même ; du côté du bas ou de la fin, elle rapproche l'élément suivant. Les boîtes peuvent se chevaucher :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative margin</title>
  <style>
    .card { background: #e5e7eb; padding: 16px; width: 240px; }
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #2563eb;
      border: 4px solid white;
      margin-top: -46px; /* pulled up over the banner */
    }
    .banner { height: 60px; background: #16a34a; width: 272px; }
  </style>
</head>
<body>
  <div class="banner"></div>
  <div class="card">
    <div class="avatar"></div>
    <p>The avatar overlaps the banner.</p>
  </div>
</body>
</html>

margin auto en flexbox

Dans un conteneur flex, une marge auto prend tout l'espace libre de son côté. C'est la façon la plus simple de pousser un élément tout au bout d'une ligne, et en flexbox auto fonctionne aussi verticalement :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex margin auto</title>
  <style>
    nav { display: flex; gap: 12px; background: #111827; padding: 10px; }
    nav a { color: white; text-decoration: none; }
    .login { margin-inline-start: auto; color: #f59e0b; }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#" class="login">Log in</a>
  </nav>
</body>
</html>

margin-inline-start: auto place l'espace libre avant « Log in », en fin de ligne, sur les pages de gauche à droite comme de droite à gauche.

Erreurs courantes

margin: 0 auto sur un élément sans largeur. Un bloc remplit déjà son conteneur ; définissez width ou max-width.
margin: auto sur un élément inline. Les marges auto d'un span, d'un a ou d'un img resté inline valent 0. Passez-le en display: block.
Additionner deux marges verticales en attendant leur somme. Elles fusionnent et seule la plus grande reste ; utilisez gap en flex ou grid, ou une seule direction de marge de façon cohérente.
La marge d'un enfant qui pousse son parent. C'est la fusion parent-enfant ; ajoutez display: flow-root au parent.
Utiliser la margin pour un espace qui devrait avoir un fond. La margin est transparente ; utilisez le padding.

Questions fréquentes

Qu'est-ce que la margin en CSS ?

La margin est l'espace à l'extérieur de la bordure d'un élément. Elle est transparente et éloigne les éléments voisins. Elle se règle avec margin ou avec les propriétés par côté margin-top, margin-right, margin-bottom et margin-left.

Que fait margin: 0 auto ?

Il met les marges du haut et du bas à 0 et partage à parts égales l'espace horizontal restant entre les marges gauche et droite, ce qui centre horizontalement un élément de type bloc. L'élément doit avoir une largeur inférieure à celle de son conteneur, par exemple max-width: 600px.

Pourquoi margin auto ne centre-t-il pas mon élément ?

Le plus souvent parce que l'élément n'a pas de largeur (un bloc remplit son conteneur, il n'y a donc rien à partager), ou parce qu'il est inline (span, a, img par défaut), et dans ce cas les marges auto valent 0. Donnez-lui une largeur et display: block, ou centrez-le depuis le parent avec flexbox ou grid.

Qu'est-ce que la fusion des marges ?

Quand deux marges verticales se touchent, par exemple la marge du bas d'un paragraphe et la marge du haut du suivant, le navigateur n'utilise que la plus grande au lieu de les additionner. Cela ne concerne que les marges verticales des boîtes de type bloc dans le flux normal, pas les mises en page flex ou grid.

Une margin peut-elle être négative ?

Oui. Une marge négative tire l'élément vers ce côté, ou tire l'élément suivant par-dessus, si bien que les boîtes peuvent se chevaucher. C'est utile pour de petits ajustements d'alignement et pour faire sortir un élément du padding de son conteneur.

Concepts liés