margin

Zuletzt aktualisiert am 15. Februar 2026

margin steuert den Außenabstand eines Elements, also den Freiraum zwischen der Box und ihren Nachbarn. Im Gegensatz zu padding liegt der Margin außerhalb des Rahmens und ist immer transparent. Mit der Shorthand-Eigenschaft margin setzt du alle vier Seiten auf einmal. Für einzelne Seiten gibt es margin-top, margin-right, margin-bottom und margin-left.

Grundlagen

Margin erzeugt Abstand zwischen Elementen, ohne die Box selbst zu verändern. Die Hintergrundfarbe eines Elements erstreckt sich nicht in den Margin-Bereich. Margin ist immer transparent und zeigt den Hintergrund des Elternelements.

Ein wichtiger Unterschied zu Padding: Margin erlaubt negative Werte und den speziellen Wert auto, der für die horizontale Zentrierung von Block-Elementen verwendet wird.

Syntax & Werte

Shorthand-Notation

Die Shorthand-Eigenschaft akzeptiert 1 bis 4 Werte im Uhrzeigersinn (oben, rechts, unten, links):

/* 1 Wert: alle Seiten gleich */
.all-sides {
  margin: 20px;
}

/* 2 Werte: oben/unten | links/rechts */
.vertical-horizontal {
  margin: 10px 30px;
}

/* 4 Werte: oben | rechts | unten | links */
.each-side {
  margin: 5px 15px 25px 40px;
}

<div class="box1">margin: 20px (alle Seiten gleich)</div>
<div class="box2">margin: 10px 30px (oben/unten 10, links/rechts 30)</div>
<div class="box3">margin: 5px 15px 25px 40px (oben, rechts, unten, links)</div>

Beispiele

Horizontale Zentrierung mit auto

Der häufigste Anwendungsfall für margin: auto ist die horizontale Zentrierung eines Block-Elements. Das Element braucht dafür eine explizite Breite.

.centered {
  width: 300px;
  margin: 0 auto;
  background: #dbeafe;
  padding: 20px;
  text-align: center;
}

<div class="centered">Zentriert mit margin: 0 auto</div>

margin: 0 auto setzt oben und unten auf 0 und verteilt den verbleibenden Platz gleichmäßig auf links und rechts. Das funktioniert nur bei Block-Elementen mit einer festen Breite.

Margin Collapsing

Vertikale Margins von benachbarten Block-Elementen werden nicht addiert, sondern kollabieren. Der größere Wert gewinnt.

.top {
  margin-bottom: 40px;
}

.bottom {
  margin-top: 25px;
}

/* Ergebnis: 40px Abstand, nicht 65px */
/* Der größere Margin "verschluckt" den kleineren */

<div class="top">margin-bottom: 40px</div>
<div class="bottom">margin-top: 25px</div>
<p style="font-family:system-ui,sans-serif;font-size:13px;color:#6b7280;margin-top:12px;">Abstand zwischen den Boxen: 40px (nicht 65px)</p>

Margin Collapsing passiert nur bei vertikalen Margins im normalen Flow. Es tritt nicht auf bei:

• Elementen mit display: flex oder display: grid
• Elementen mit overflow ungleich visible
• Elementen, deren Margins durch Border oder Padding getrennt sind
• Horizontalen Margins (links/rechts)

Negative Margins

Negative Margins ziehen ein Element in Richtung seiner Nachbarn. Damit kannst du Elemente überlappen lassen.

.box-normal {
  background: #dbeafe;
  padding: 16px;
}

.box-negative {
  background: #fecaca;
  padding: 16px;
  margin-top: -20px;
  margin-left: 30px;
}

<div class="container">
<div class="box-normal">Normale Box</div>
<div class="box-negative">margin-top: -20px (überlappt die Box darüber)</div>
</div>

Logische Properties: margin-inline und margin-block

Die logischen Varianten beziehen sich auf die Schreibrichtung statt auf physische Seiten. In westlichen Sprachen (links nach rechts) entspricht margin-inline den horizontalen Margins und margin-block den vertikalen.

.logical {
  margin-inline: auto;
  margin-block: 20px;
  width: 300px;
  background: #d1fae5;
  padding: 16px;
}

<div class="logical">margin-inline: auto (zentriert horizontal)</div>

margin-inline: auto ist die moderne Variante von margin-left: auto; margin-right: auto und eignet sich besser für internationale Projekte.

Barrierefreiheit

Ausreichend Abstand zwischen interaktiven Elementen: Margins zwischen Buttons, Links oder Formularfeldern verhindern versehentliche Klicks oder Taps, besonders auf Touch-Geräten. Zu dicht platzierte Elemente sind schwer zu treffen und frustrieren Nutzer mit motorischen Einschränkungen. Ein Mindestabstand von 8-12px zwischen Touch-Targets ist empfehlenswert.

Logische Properties für Internationalisierung: Nutze margin-inline und margin-block statt margin-left/margin-right für mehrsprachige Websites. In RTL-Sprachen wie Arabisch oder Hebräisch dreht sich die Leserichtung, und logische Properties passen sich automatisch an. Das spart dir manuelle Anpassungen und macht dein Layout robuster.

Negative Margins mit Bedacht einsetzen: Negative Margins können Inhalte überlappen lassen und Text unleserlich machen. Das schadet der Lesbarkeit besonders bei Nutzern mit Sehschwächen oder auf kleinen Bildschirmen. Wenn du negative Margins verwendest, teste gründlich bei verschiedenen Zoom-Stufen und Schriftgrößen.

Häufige Fehler

• margin: auto ohne feste Breite: Auto-Margins zentrieren nur Block-Elemente mit einer expliziten width. Ohne Breitenangabe nimmt das Element die volle Breite ein, und es gibt nichts zu zentrieren.
• Margin Collapsing vergessen: Wenn du 20px unten und 20px oben setzt, erwartest du vielleicht 40px Abstand, bekommst aber nur 20px. Das ist kein Bug, sondern beabsichtigtes Verhalten.
• Vertikale Zentrierung mit margin: auto 0: Anders als horizontal funktioniert margin: auto vertikal nicht bei Block-Elementen im normalen Flow. Verwende dafür Flexbox (align-items: center).
• Prozent-Margin bei top/bottom: Auch margin-top und margin-bottom in Prozent beziehen sich auf die Breite des Elternelements, nicht auf die Höhe. Das überrascht viele Entwickler.
• Zu viele unterschiedliche Margin-Werte: Wenn jedes Element andere Margins hat, wird das Layout unübersichtlich. Verwende ein konsistentes Spacing-System (z.B. 8px, 16px, 24px, 32px).

Browser-Kompatibilität

margin und alle Einzeleigenschaften werden von allen Browsern vollständig unterstützt. Die logischen Properties margin-inline und margin-block sind ebenfalls breit verfügbar.

Email-Kompatibilität

Margin-Unterstützung in HTML-Emails variiert stark je nach Client.

Verwandte Eigenschaften