Eigenschaft margin

Die Eigenschaft margin legt den äußeren Abstand eines Elements fest. Als Wert für die Eigenschaft dienen beliebige Größeneinheiten oder der Schlüsselwert auto, der dem Browser ermöglicht, den Abstand des Elements selbstständig zu berechnen. Standardmäßig kann jeder Browser Elementen verschiedene Abstände hinzufügen.

Die Eigenschaft ist eine Kurzform für die Eigenschaften margin-top, margin-right, margin-bottom, margin-left.

Syntax

Selector {
	margin: Wert;
}

Anzahl der Werte

Die Eigenschaft margin akzeptiert 1, 2, 3 oder 4 Werte, durch Leerzeichen getrennt:

Anzahl	Beschreibung
`1`	Ein Wert legt den Abstand auf allen Seiten des Elements fest.
`2`	Der erste Wert legt den Abstand oben und unten fest, der zweite - rechts und links.
`3`	Der erste Wert legt den Abstand oben fest, der zweite - rechts und links, der dritte - unten.
`4`	Der erste Wert legt den Abstand oben fest, der zweite - rechts, der dritte - unten, der vierte - links.

Beispiel

Jetzt haben wir einen Block ohne Abstände:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 0;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Beispiel

Jetzt weisen wir dem Block einen Abstand von 10px zu:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Beispiel

Weisen wir dem Block einen Abstand von 10px oben und unten und 20px - links und rechts zu:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px 20px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Beispiel

Weisen wir dem Block einen Abstand von 5px oben, 15px rechts, 25px unten und 35px links zu:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 5px 15px 25px 35px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Siehe auch

die Eigenschaft padding,
die den Innenabstand festlegt