Lädt...

CSS-Margin

Sie bemalen eine Box, ziehen einen Rahmen und runden Ecken. Nächster Schritt: Boxen auseinanderschieben. margin ist der äußere Abstand um ein Element — Atemraum außerhalb des Rahmens.

Was ist Margin?

Margin ist leerer Raum um die Außenseite des Elementrahmens. Er trennt eine Box von ihren Nachbarn. Er malt den Hintergrund des Elements nicht in diese Lücke — die Lücke liegt außerhalb der gefüllten Fläche.

Margin vs. Padding (kurzer Kontrast)

Padding (nächste Lektion) liegt innerhalb des Rahmens — zwischen Inhalt und Kante. Margin liegt außerhalb des Rahmens — zwischen dieser Box und der nächsten. Merksatz für heute: margin = außen, padding = innen.

Kurzschreibweise: wie viele Werte?

Sie können eine, zwei, drei oder vier Längen angeben. Die Seitenreihenfolge ist fest.

📊 Anzahl der Margin-Kurzwerte

Werte Bedeutung Alltag
1 Alle vier Seiten gleich Gleichmäßiger Atemraum um eine Karte
2 Oben+unten, dann links+rechts Vertikale und horizontale Paare
3 Oben, links+rechts, unten Seltener — Existenz kennen
4 Oben, rechts, unten, links Volle Kontrolle, im Uhrzeigersinn ab oben

Gleicher Abstand auf jeder Seite

Beginnen Sie mit einer Länge für alle Seiten.

Gleicher Margin auf allen Seiten

css
CSS Code 
.card {
margin: 16px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Zwei Werte — vertikal, dann horizontal

Zwei Längen paaren gegenüberliegende Seiten: zuerst oben und unten; dann links und rechts.

Vertikaler dann horizontaler Margin

css
CSS Code 
.panel {
margin: 24px 12px;
border: 1px solid #94a3b8;
padding: 1rem;
background-color: #f8fafc;
}

Vier Werte — im Uhrzeigersinn ab oben

Wenn jede Seite eigenen Abstand braucht: oben → rechts → unten → links.

Vierseitige Margin-Kurzform

css
CSS Code 
.note {
margin: 8px 20px 32px 20px;
border: 1px solid #0f766e;
padding: 0.75rem;
background-color: #ecfdf5;
}

Einen Block mit auto zentrieren

Für eine Blockbox mit fester Breite teilen margin-left: auto und margin-right: auto (oft margin: 0 auto) den Restplatz gleich auf beide Seiten — der Klassiker zur horizontalen Zentrierung.

Horizontale Zentrierung mit auto

css
CSS Code 
.box {
width: 280px;
margin: 0 auto;
border: 2px solid #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

Vertikale Margins können kollabieren

Wenn zwei Blockelemente gestapelt sind, verschmelzen der untere Margin des ersten und der obere des zweiten oft zu einem Abstand — meist dem größeren der beiden, nicht der Summe. Das überrascht Einsteiger; erwarten Sie es zwischen gestapelten Absätzen und Abschnitten.

Gestapelte Blöcke mit Margin-Collapse

css
CSS Code 
.block-a {
margin-bottom: 24px;
background-color: #ccfbf1;
padding: 0.5rem;
}

.block-b {
margin-top: 24px;
background-color: #99f6e4;
padding: 0.5rem;
}
/* Dazwischen sehen Sie oft etwa 24px, nicht 48px */

Eine Seite nach der anderen

Langformen wie margin-top sind ideal, wenn Sie nur Platz über einer Überschrift oder unter einem Button brauchen.

Nur oberer Margin

css
CSS Code 
.section-title {
margin-top: 2rem;
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}

Selbst ausprobieren

  1. Geben Sie zwei Karten margin: 16px und beobachten Sie den Außenabstand.
  2. Schreiben Sie eine als margin: 24px 12px und achten Sie auf vertikal vs. horizontal.
  3. Zentrieren Sie eine 280px-breite Box mit margin: 0 auto.
  4. Stapeln Sie zwei farbige Blöcke mit je margin-bottom und margin-top von 24px — wirkt die Lücke wie 24px oder 48px?
  5. Setzen Sie Abstand nur mit margin-top an einer Überschrift.

Typische Fehler

  • Margin nutzen, wenn Padding gemeint war (innere Polsterung für Text)
  • Erwarten, dass margin: auto jedes Flex-/Grid-Item wie einen einfachen Block zentriert (Layout-Kontext zählt)
  • Obere und untere Margins addieren und annehmen, sie summieren sich immer (Collapse kann die Lücke verkleinern)
  • Riesige Margins überall statt einer kleinen, konsistenten Skala
  • Die Vierer-Reihenfolge verwechseln (oben, rechts, unten, links)

Kurzfassung

  • Margin ist äußerer Raum außerhalb des Rahmens
  • Kurzform: 1, 2 oder 4 Werte (vier im Uhrzeigersinn ab oben)
  • margin: 0 auto zentriert einen Block mit Breite horizontal
  • Vertikale Margins zwischen gestapelten Blöcken können kollabieren
  • Nutzen Sie Langformen, wenn nur eine Seite Abstand braucht
  • Padding ist der innere Cousin — nächste Lektion

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
9
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial