Ausführbare CSS-Docs: CSS Margin

Was Margin ist

Margin ist der Abstand außerhalb des Rahmens eines Elements. Er ist immer transparent, und seine Aufgabe ist, andere Elemente wegzuschieben. Im Beispiel scheint der graue Container durch das Margin um die blaue Box hindurch:

<!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>

Das graue Band gehört nicht zur Box: Der eigene Hintergrund der Box endet an ihrem Rahmen. Für Abstand, der den Hintergrund des Elements übernimmt, nimmst du Padding.

Die margin-Kurzschreibweise

margin nimmt ein bis vier Werte, in derselben Reihenfolge im Uhrzeigersinn wie Padding:

Deklaration	Oben	Rechts	Unten	Links
`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

Jede Seite hat außerdem eine eigene Eigenschaft (margin-top, margin-right, margin-bottom, margin-left) und logische Varianten, die der Textrichtung folgen (margin-inline-start, margin-inline-end, margin-block, margin-inline).

Anders als Padding akzeptiert Margin auto und negative Werte:

Wert	Beispiel	Hinweise
Länge	`16px`, `1.5rem`	Am häufigsten
Prozent	`5%`	Von der Breite des umgebenden Blocks, für alle vier Seiten
`auto`	`margin: 0 auto`	Der Browser füllt den übrigen Platz auf
Negativ	`margin-top: -10px`	Zieht das Element oder seinen Nachbarn heran, kann überlappen

Zentrieren mit margin: 0 auto

margin: 0 auto ist der klassische Weg, einen Block horizontal zu zentrieren. auto auf beiden Seiten sagt dem Browser, den übrigen Platz gleichmäßig aufzuteilen. Dafür braucht das Element eine Breite, die kleiner als der Container ist, sonst bleibt nichts zum Aufteilen:

<!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>

Auto-Margins zentrieren im normalen Fluss nicht vertikal (vertikale auto-Margins werden zu 0) und bewirken an Inline-Elementen nichts. Einen vollständigen Überblick über das Zentrieren findest du unter div zentrieren.

Margin Collapsing

Wenn sich zwei vertikale Margins berühren, addieren sie sich nicht. Der Browser behält nur das größere. Hier hat die erste Box margin-bottom: 30px und die zweite margin-top: 20px, und der Abstand zwischen ihnen ist 30px, nicht 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>

Das Zusammenfallen ist gewollt: So können Absätze und Überschriften jeweils ihren eigenen Abstand mitbringen, ohne dass er sich dort verdoppelt, wo sie aufeinandertreffen. Überraschend ist es in einem zweiten Fall, in dem das obere Margin eines Kindes aus seinem Elternelement herausrutscht:

<!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>

Im ersten Elternelement ist das 30px-Margin des Kindes durch die Oberkante des Elternelements hindurchgefallen. Es schiebt deshalb das ganze Elternelement nach unten, statt darin grauen Abstand zu erzeugen. Jede dieser Maßnahmen verhindert das:

display: flow-root am Elternelement (anders als overflow: hidden schneidet es nichts ab).
Padding oder ein Rahmen an der Oberkante des Elternelements.
Ein Flex- oder Grid-Elternelement: Margins von Flex- und Grid-Items fallen nie zusammen.

Horizontale Margins fallen nie zusammen, ebenso wenig die Margins von gefloateten oder absolut positionierten Elementen.

Negative Margins

Ein negatives Margin zieht in die Gegenrichtung. Oben oder auf der Startseite verschiebt es das Element selbst; unten oder auf der Endseite zieht es das nächste Element heran. Boxen können sich überlappen:

<!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 in Flexbox

In einem Flex-Container nimmt ein auto-Margin den gesamten freien Platz auf seiner Seite ein. Das ist der einfachste Weg, ein Item ans andere Ende einer Zeile zu schieben, und in Flexbox funktioniert auto auch vertikal:

<!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 setzt den freien Platz vor „Log in“, ans Ende der Zeile, sowohl auf Seiten von links nach rechts als auch von rechts nach links.

Häufige Fehler

margin: 0 auto an einem Element ohne Breite. Ein Block füllt seinen Container bereits aus; setz width oder max-width.
margin: auto an einem Inline-Element. Auto-Margins an einem span, a oder einem inline gebliebenen img sind 0. Mach es zu display: block.
Zwei vertikale Margins addieren und die Summe erwarten. Sie fallen auf das größere zusammen; nimm gap in Flex oder Grid oder konsequent nur eine Margin-Richtung.
Das Margin eines Kindes schiebt sein Elternelement. Das ist Collapsing zwischen Eltern und Kind; gib dem Elternelement display: flow-root.
Margin für Abstand nutzen, der einen Hintergrund haben soll. Margin ist transparent; nimm Padding.

Häufig gestellte Fragen

Was ist Margin in CSS?

Margin ist der Abstand außerhalb des Rahmens eines Elements. Er ist transparent und schiebt benachbarte Elemente weg. Du setzt ihn mit margin oder den Eigenschaften für einzelne Seiten margin-top, margin-right, margin-bottom und margin-left.

Was macht margin: 0 auto?

Es setzt das obere und untere Margin auf 0 und teilt den übrigen horizontalen Platz gleichmäßig auf das linke und rechte Margin auf. Damit wird ein Block-Element horizontal zentriert. Das Element braucht eine Breite, die kleiner als sein Container ist, zum Beispiel max-width: 600px.

Warum zentriert margin auto mein Element nicht?

Meist weil das Element keine Breite hat (ein Block füllt seinen Container, also gibt es nichts aufzuteilen) oder weil es inline ist (span, a, img standardmäßig), wo auto-Margins 0 sind. Gib ihm eine Breite und display: block, oder zentriere es vom Elternelement aus mit Flexbox oder Grid.

Was ist Margin Collapsing?

Wenn zwei vertikale Margins aufeinandertreffen, etwa das untere Margin eines Absatzes und das obere des nächsten, verwendet der Browser nur das größere, statt sie zu addieren. Das betrifft nur vertikale Margins von Block-Boxen im normalen Fluss, nicht in Flex- oder Grid-Layouts.

Kann Margin negativ sein?

Ja. Ein negatives Margin zieht das Element zu dieser Seite hin oder zieht das nächste Element darüber, sodass sich Boxen überlappen können. Das ist praktisch für kleine Korrekturen an der Ausrichtung und damit ein Element aus dem Padding seines Containers ausbrechen kann.

Verwandte Konzepte