CSS margin - Außenabstand zu benachbarten Elementen festlegen

Mit der Eigenschaft margin wird den HTML-Elementen ein Außenabstand zugewiesen. Diese werden nach dem Box-Modell nicht zur Boxgröße hinzugerechnet und vergrößern somit die Box des Elements nicht. Jedoch vergrößern sie den Platz, der durch die Box in Anspruch genommen wird und die Box selbst und evtl. benachbarte Elemente können dadurch verschoben werden.

Die Eigenschaft margin kann mit Ausnahme einiger Tabellenelemente allen HTML-Elementen zugewiesen werden. Die Werte können für alle Seiten unterschiedlich sein. Dabei verwendet man die folgenden Eigenschaften.

margin-top (oben)
margin-right (rechts)
margin-bottom (unten)
margin-left (links)

Die Syntax ist auf der folgenden Abbildung anhand eines Beispiels ersichtlich.

Kurzschreibweise für margin (Shorthand)

Die Eigenschaft margin zählt zu den Eigenschaften, die in Kurzschreibweise angegeben werden können. Diese werden auch Shorthand-Eigenschaften genannt. Die einzelnen Werte werden dabei, beginnend mit dem oberen Wert und im Uhrzeigersinn, mit einem Leerzeichen voneinander getrennt angegeben. Nachfolgend ist die Abbildung anhand eines Beispiels.

Angabe von drei Werten

Es ist auch möglich, nur drei Werte anzugeben, wenn diese für die linke und rechte Seite identisch sind. Bei drei Werten werden sie wie folgt zugeordnet.

1. Wert: oben
2. Wert: rechts und links
3. Wert: unten

Ein Beispielcode.

.selektor {
margin: 10px 15px 20px;
}

Angabe von zwei Werten

Es ist auch möglich, nur zwei Werte anzugeben. Das ist in den Fällen möglich, wenn einerseits die Werte für oben und unten identisch sind und andererseits für links und rechts. Die angegeben Werte gelten dann wie folgt.

1. Wert: oben und unten
2. Wert: links und rechts

Ein Beispielcode.

.selektor {
margin: 15px 20px;
}

Angabe von nur einem Wert

Wenn die Werte für alle vier Seiten identisch sind, dann reicht auch die Angabe eines Werts. Ein Beispielcode.

.selektor {
margin: 15px;
}

Werte für margin

Als Werte kann man nicht nur numerische Angaben mit der Einheit px angeben. Nachfolgend ist eine Auflistung möglicher Werte, wobei diese nicht von allen Browsern unterstützt werden.

Numerische Angaben mit Einheit

<Zahl>px (Pixel)
<Zahl>% (Prozent, bezieht sich auf die Breite des Elternelements)
<Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
<Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
<Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
<Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
<Zahl>vw (1vw entspricht 1% der Anzeigebreite)
<Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
<Zahl>vmin (der kleinere Wert von vw oder vh)
<Zahl>vmax (der größere Wert von vw oder vh)
<Zahl>pt (Punkt)
<Zahl>pc (Pica)
<Zahl>in (Inch)
<Zahl>mm (Millimeter)
<Zahl>cm (Zentimeter)

Keyword-Werte

initial (Setzt auf den Standardwert)
inherit (Vererbt vom Elternelement)
unset (Setzt auf den Wert, der über inherit vererbt worden ist und auf initial, falls nichts vererbt wurde)

Standardwerte bei nicht verwendetem margin

Die Browser haben für viele Elemente einen gewissen Standardwert für margin, wenn nichts angegeben wurde. Beispielsweise werden automatisch Abstände vor und nach den Überschriften erzeugt, falls es keine CSS-Regeln hierfür gibt. Auch bei normalen Absätzen sind gewisse Standardwerte implementiert.

Zusammenfallende Außenabstände (collapsing-margins)

Wenn zwei Elemente neben- oder untereinander angeordnet werden, sind die Regeln für zusammenfallende Außenabstände zu berücksichtigen, die auch collapsing-margins genannt werden. Damit ist gemeint, dass die Außenabstände zweier benachbarter Elemente zusammenfallen können und dabei nicht addiert werden. Sie bilden somit einen gemeinsamen Außenabstand, der die beiden Elemente voneinander trennt.

Im Falle von collapsing-margins gilt der größere Wert. Wenn beispielsweise das eine Element einen Außenabstand von 20px hat und das andere 10px, dann ist der Abstand zueinander 20px. Die Außenabstände von horizontal positionierten Elementen fallen nicht zusammen. In dem Fall wäre der Abstand zwischen den beiden Elementen in diesem Beispiel 30px.