margin

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.

Steckbrief margin

Syntax: margin: <length> | <percentage> | auto
Initialwert: 0
Vererbt: Nein
Animierbar: Ja
Kurzform für: margin-top, margin-right, margin-bottom, margin-left

Kategorie: Box-Modell
Werte: 4
Beispiele: 3
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

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

4 Werte

Wert	Beschreibung	Beispiel
`<length>`	Fester Abstand in einer CSS-Einheit.	margin: 20px
`<percentage>`	Prozentualer Abstand, bezogen auf die Breite des Elternelements (auch bei margin-top/bottom!).	margin: 5%
`auto`	Browser berechnet den Abstand automatisch. Nützlich für horizontale Zentrierung.	margin: 0 auto
`0`	Kein Abstand.	margin: 0

Shorthand-Notation

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

Margin Shorthand

/* 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

3 Beispiele

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

Horizontale Zentrierung

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

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

Margin Collapsing

.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 ziehen ein Element in Richtung seiner Nachbarn. Damit kannst du Elemente überlappen lassen.

Negative Margins

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

Logische Margin-Properties

.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

5 Fehler

01 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.

02 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.

03 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).

04 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.

05 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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

Apple Mail

Komplett
Gmail

Teilweise

margin wird auf einigen Elementen ignoriert, margin: auto funktioniert nicht
Outlook

Teilweise

Nur margin auf Block-Elementen, keine negativen Margins
Thunderbird

Komplett
Yahoo Mail

Teilweise

Grundlegende margin-Unterstützung

Steckbrief margin

Syntax: margin: <length> | <percentage> | auto
Initialwert: 0
Vererbt: Nein
Animierbar: Ja
Kurzform für: margin-top, margin-right, margin-bottom, margin-left

Kategorie: Box-Modell
Werte: 4
Beispiele: 3
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Inhalt

8 Kapitel

Verwandt

padding border box-sizing

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da