margin

Die margin-Eigenschaft definiert den äußersten Teil des Box-Modells und erzeugt Abstand um ein Element, außerhalb aller definierten Rahmen.

Ränder werden mit Längen, Prozentwerten oder dem Schlüsselwort auto gesetzt und können negative Werte haben. Hier ist ein Beispiel

.box {
  margin: 0 3em 0 3em;
}

margin ist eine Kurzschreibweise und akzeptiert bis zu vier Werte, hier gezeigt

.box {
    margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>
}</margin-left></margin-bottom></margin-right></margin-top>

Wenn weniger als vier Werte gesetzt sind, werden die fehlenden Werte anhand der definierten Werte angenommen. Zum Beispiel würden die folgenden beiden Regelwerke identische Ergebnisse liefern

.box {
  margin: 0 1.5em;
}

.box {
  margin: 0 1.5em 0 1.5em;
}

Wenn also nur ein Wert definiert ist, werden alle vier Ränder auf denselben Wert gesetzt. Wenn drei Werte deklariert werden, ist es margin: [oben] [links-und-rechts] [unten];.

Jeder der einzelnen Ränder kann mit der Langschreibweise deklariert werden, in diesem Fall würden Sie nur einen Wert pro Eigenschaft definieren

.box {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
}

auto und Zentrierung

Jede der Rand-Eigenschaften kann auch den Wert auto annehmen. Ein Wert von auto weist den Browser im Grunde an, den Rand für Sie zu definieren. In den meisten Fällen ist ein Wert von auto gleichbedeutend mit einem Wert von 0 (was der initiale Wert für jede Rand-Eigenschaft ist) oder dem verfügbaren Platz auf dieser Seite des Elements. auto ist jedoch praktisch für die horizontale Zentrierung

.container {
  width: 980px;
  margin: 0 auto;
}

In diesem Beispiel werden zwei Dinge getan, um dieses Element horizontal im verfügbaren Platz zu zentrieren

• Dem Element wird eine bestimmte Breite gegeben
• Die linken und rechten Ränder werden auf auto gesetzt

Ohne die angegebene Breite hätten die auto-Werte im Wesentlichen keine Auswirkung und würden die linken und rechten Ränder auf 0 oder den verfügbaren Platz innerhalb des übergeordneten Elements setzen.

Es sollte auch darauf hingewiesen werden, dass auto nur für die horizontale Zentrierung nützlich ist und daher die Verwendung von auto für obere und untere Ränder ein Element nicht vertikal zentriert, was für Anfänger verwirrend sein kann.

Randkollaps

Vertikale Ränder bei verschiedenen Elementen, die sich berühren (also keinen Inhalt, keine Polsterung oder keine Rahmen dazwischen haben), kollabieren und bilden einen einzelnen Rand, der gleich dem größeren der angrenzenden Ränder ist. Dies geschieht nicht bei horizontalen Rändern (links und rechts), nur bei vertikalen (oben und unten).

Um dies zu veranschaulichen, nehmen wir den folgenden HTML-Code

<h2>Collapsing Margins</h2>



Example text.

Und das folgende CSS

h2 {
  margin: 0 0 20px 0;
}

p {
  margin: 10px 0 0 0;
}

In diesem Beispiel erhält das h2-Element einen unteren Rand von 20px. Das Absatz-Element, das ihm im Quelltext unmittelbar folgt, hat einen oberen Rand von 10px.

Gesunder Menschenverstand würde suggerieren, dass die vertikale Randstärke zwischen dem h2 und dem Absatz insgesamt 30px (20px + 10px) beträgt. Aber aufgrund des Randkollapses beträgt die tatsächliche Stärke 20px. Dies wird im folgenden eingebetteten Stift demonstriert

Check out this Pen!

Obwohl Randkollaps auf den ersten Blick unintuitiv erscheinen mag, sind sie aus mehreren Gründen nützlich. Erstens verhindern sie, dass leere Elemente zusätzlichen, meist unerwünschten vertikalen Randraum hinzufügen.

Zweitens ermöglichen sie einen konsistenteren Ansatz bei der Deklaration universeller Ränder über Seitenelemente hinweg. Zum Beispiel haben Überschriften üblicherweise vertikalen Randraum, ebenso Absätze. Wenn Ränder nicht kollabieren würden, müssten Überschriften, die auf Absätze folgen (oder umgekehrt), oft die Ränder eines der Elemente zurücksetzen, um eine konsistente vertikale Abstandsmenge zu erzielen.

Drittens gilt der Randkollaps auch für verschachtelte Elemente. Sehen Sie sich den folgenden Stift an

Check out this Pen!

Hier hat das Absatz-Element einen oberen Rand von 30px und ist in ein div-Element mit einem oberen Rand von 40px verschachtelt. Zusätzlich hat das h2-Element einen unteren Rand von 20px.

Auch hier würde gesunder Menschenverstand nahelegen, dass der gesamte vertikale Randraum 90px (20px + 40px + 30px) beträgt, stattdessen kollabieren die Ränder zu einem einzigen 40px-Rand (dem höchsten der drei). Dies ist in den meisten Fällen hilfreich, da keine Notwendigkeit besteht, die oberen Ränder neu zu definieren, um den zusätzlichen vertikalen Raum zu entfernen.

Negative Ränder

Wie Sie vielleicht vermuten, schieben positive Randwerte andere Elemente weg, während ein negativer Rand entweder das Element selbst in diese Richtung zieht oder andere Elemente zu sich heran zieht.

Hier ist ein Beispiel für einen Container mit Polsterung, und der Überschriften-h2 zieht sich mit negativen Rändern durch diese Polsterung zurück zu den Kanten

Siehe den Stift Häufigster Anwendungsfall für negative Ränder von Chris Coyier (@chriscoyier)
auf CodePen.

Hier ist ein Beispiel, bei dem der erste Absatz einen negativen unteren Rand hat, der den nächsten Absatz zu sich heran zieht.

Siehe den Stift Negativer Rand zieht unteren Absatz heran von Chris Coyier (@chriscoyier)
auf CodePen.

Verwandte Eigenschaften

• padding

Weitere Ressourcen

• Ränder auf W3C
• Rand auf MDN
• Mehr über Randkollaps

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Funktioniert	Funktioniert	Funktioniert	Funktioniert	Funktioniert	Funktioniert	Funktioniert

IE6 ist anfällig für den Bug mit doppeltem Float-Rand, der in den meisten Fällen durch Hinzufügen von display: inline zum gefloateten Element behoben werden kann.