CSS/Tutorials/Boxmodell/margin
Text-Info
- 30min
- mittel
- HTML
Für ein p-Element, das direkt innerhalb des body-Elements notiert ist, kennzeichnen Angaben zu linkem und rechtem Außenrand seinen Abstand zu den Elementgrenzen des body-Elements. Wenn mehrere solcher Absätze aufeinander folgen, markieren Angaben zum Außenrand oben und unten den Abstand zwischen den Absätzen. Das folgende Bild veranschaulicht die Möglichkeiten, Außenränder zu definieren:
Inhaltsverzeichnis
Sinnvoll sind die hier beschriebenen CSS-Eigenschaften vor allem für Block-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, address oder pre. div und table sind ebenfalls Block-Elemente. Auch auf body lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden – in diesem Fall werden Ränder für den gesamten sichtbaren Körper der HTML-Datei definiert.
box-sizing den Wert content-box hat oder nicht gesetzt ist.table sowie Elementen, die durch display: table-... als solche formatiert wurden, können keine Außenabstände zugewiesen werden.margin-"Flächen" sind immer transparent und lassen sich nicht gestalten.Mit negativen Werten, also Angaben wie beispielsweise margin-top: -50px, können Sie für besondere gestalterische Zwecke eine Überlappung von Elementen erreichen.
Außenabstände oben und unten[Bearbeiten]
margin-top (Außenabstand oben)[Bearbeiten]
Sie können bestimmen, welchen Abstand ein Element zu seinem Vorgängerelement oder – falls es das erste Kindelement eines Elementes ist – zu seinem Elternelement nach oben hin hat.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin-top</title>
<style>
p { margin-top: 3em; }
</style>
</head>
<body>
<h1>Verwendung von <code>margin-top</code></h1>
<main>
<p>Dieser Absatz hat einen Abstand nach oben von
<code>3em</code>. Da es keine weiteren Elemente vorher
gibt, bedeutet das den Abstand zum oberen Rand des
Elternelements.
</p>
<h2>Überschrift zweiter Ordnung</h2>
</main>
</body>
</html>
Mit margin-top können Sie den Abstand nach oben bestimmen. Erlaubt ist eine Längenangabe sowie die Werte auto oder inherit.
Im obigen Beispiel wird für Überschriften zweiter Ordnung und Textabsätze ein vorausgehender Abstand von 3em definiert. Für die Überschrift zweiter Ordnung ist das der Abstand zu ihrem Vorgängerelement (p), für den Textabsatz ist dies der Abstand zu seinem Elternelement (main).
- Bei Verwendung im
main-Element bestimmtmargin-topden Abstand zum oberen Rand. - Der Wert
autoentspricht dem Ausgangswert für diese Eigenschaft, setzt also lediglich einen zuvor definierten Wert zurück. - Bei Inline-Elementen sind
margin-topundmargin-bottomwirkungslos.
margin-bottom (Außenabstand unten)[Bearbeiten]
Sie können bestimmen, wie viel Abstand ein Element zu seinem Nachfolgerelement nach unten hin hat, oder – wenn es das letzte Kindelement eines Elements ist – wie viel Abstand es zu dessen unteren Rand hin hat.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin-bottom</title>
<style>
h2, main > p:last-of-type { margin-bottom: 3em; }
</style>
</head>
<body>
<h1>Verwendung von <code>margin-bottom</code></h1>
<main>
<p>Der Abstand der nachfolgenden Überschrift zweiter Ordnung
zum darauf folgenden Absatz wurde mit
<code>3em</code> definiert.
</p>
<h2>Überschrift zweiter Ordnung</h2>
<p>Hier steht der Absatz nach der Überschrift zweiter Ordnung,
um den Abstand der Überschrift zweiter Ordnung nach unten
zu demonstrieren. Aber auch dieser hat einen Abstand von
<code>3em</code> nach unten zum Rand seines Elternelements.
</p>
</main>
</body>
</html>
Mit margin-bottom können Sie den Abstand nach unten bestimmen. Erlaubt ist eine Längenangabe sowie die Werte auto oder inherit.
Im obigen Beispiel wird für Überschriften zweiter Ordnung und den jeweils letzten Textabsatz in einem main-Element ein nachfolgender Abstand von 3em definiert. Für die Überschrift zweiter Ordnung ist das der Abstand zu ihrem Nachfolgerelement (p), für den letzten Textabsatz ist dies der Abstand zu seinem Elternelement (main).
- Bei Verwendung im
main-Element bestimmtmargin-bottomden Abstand zum unteren Rand desmain-Elements. - Der Wert
autoentspricht dem Ausgangswert für diese Eigenschaft, setzt also lediglich einen zuvor definierten Wert zurück. - Bei Inline-Elementen sind
margin-topundmargin-bottomwirkungslos.
Zusammenfallende Außenabstände[Bearbeiten]
benachbarte Geschwister-Elemente[Bearbeiten]
Treffen ein margin-bottom eines Elementes und ein margin-top eines anderen Elementes zusammen, so wird der Gesamtabstand der beiden Elemente nach folgenden Regeln ermittelt:
- Falls eines der beiden Elemente eine von
staticabweichende Positionierung hat oder perfloataus dem Elementfluss entfernt wurde, werden beide Abstandsangaben berücksichtigt.
...
<style>
#id1 { margin-bottom: 80px; }
#id2 { margin-top: 20px; }
</style>
...
<body>
<div id="id1">Text</div>
<div id="id2">Text</div>
</body>
...
- Falls sich beide Elemente im normalen Elementfluss befinden und beide
margin-Angaben das gleiche Vorzeichen haben, wird derjenige der beidenmargin-Werte berücksichtigt, der den gößeren Betrag hat.
...
<style>
#id1 { margin-bottom: 80px; }
#id2 { margin-top: 20px; }
</style>
...
<body>
<div id="id1">Text</div>
<div id="id2">Text</div>
</body>
...
...
<style>
#id1 { margin-bottom: -80px; }
#id2 { margin-top: -20px; }
</style>
...
<body>
<div id="id1">Text</div>
<div id="id2">Text</div>
</body>
...
- Falls sich beide Elemente im normalen Elementfluss befinden und die beiden
margin-Angaben unterschiedliches Vorzeichen haben, so ist der Abstand gleich der Summe der beiden Werte.
...
<style>
#id1 { margin-bottom: 80px; }
#id2 { margin-top: -20px; }
</style>
...
<body>
<div id="id1">Text</div>
<div id="id2">Text</div>
</body>
...
...
<style>
#id1 { margin-bottom: -80px; }
#id2 { margin-top: 20px; }
</style>
...
<body>
<div id="id1">Text</div>
<div id="id2">Text</div>
</body>
...
Element und Elternelement[Bearbeiten]
Treffen ein margin-top eines ersten Kindes und ein margin-top seines Elternelementes oder ein margin-bottom eines letzten Kindes und ein margin-bottom seines Elternelementes zusammen, so wird der Gesamtabstand nach folgenden Regeln berechnet:
- Falls das Elternelement einen oberen bzw. unteren Rand hat oder für dieses ein oberer bzw. unterer Innenabstand definiert ist, werden beide Abstandsangaben berücksichtigt.
...
<style>
#id1 { margin-top: 80px; }
#id2 { margin-top: 20px; }
</style>
...
<body>
<div id="oben">oben</div>
<div id="id1">Text
<div id="id2">Text</div>
</div>
</body>
...
padding-top von "id1".- Falls das Elternelement keinen oberen bzw. unteren Rand hat und für dieses kein oberer bzw. unterer Innenabstand definiert ist und beide margin-Angaben dasselbe Vorzeichen haben, wird derjenige der beiden margin-Werte berücksichtigt, der den größeren Betrag hat.
...
<style>
#id1 { margin-top: 80px; }
#id2 { margin-top: 20px; }
</style>
...
<body>
<div id="oben">oben</div>
<div id="id1">Text
<div id="id2">Text</div>
</div>
</body>
...
...
<style>
#id1 { margin-top: -80px; }
#id2 { margin-top: -20px; }
</style>
...
<body>
<div id="oben">oben</div>
<div id="id1">Text
<div id="id2">Text</div>
</div>
</body>
...
- Falls das Elternelement keinen oberen bzw. unteren Rand hat und für dieses kein oberer bzw. unterer Innenabstand definiert ist und beide margin-Angaben unterschiedliches Vorzeichen haben, so ist der Gesamtabstand gleich der Summe der beiden Werte.
...
<style>
#id1 { margin-top: 80px; }
#id2 { margin-top: -20px; }
</style>
...
<body>
<div id="oben">oben</div>
<div id="id1">Text
<div id="id2">Text</div>
</div>
</body>
...
...
<style>
#id1 { margin-top: -80px; }
#id2 { margin-top: 20px; }
</style>
...
<body>
<div id="oben">oben</div>
<div id="id1">Text
<div id="id2">Text</div>
</div>
</body>
...
Zusammenfallende Außenabstände (collapsing margins)[Bearbeiten]
Zwei oder mehr benachbarte Außenabstände (margins) können sich miteinander verbinden und so einen einzigen Abstand bilden. Dieser Vorgang wird zusammenfallen genannt und der so entstandene Abstand wird zusammengefallener Außenabstand (englisch: collapsed margin) genannt.
Horizontale Außenabstände fallen nicht zusammen.
Vertikale Außenabstände können zusammenfallen, wenn sie zu einer Block-Box gehören und weder durch Innenabstände (padding), Rahmen (border), Inlineelemente (mit einer Höhe größer als Null) oder Clearance voneinander getrennt sind. Die Beziehung der Boxen zueinander spielt keine Rolle, folgende Paare können daher zusammenfallen:
- Oberer Außenabstand einer Box und oberer Außenabstand der ersten Kind-Box.
- Unterer Außenabstand einer Box und oberer Außenabstand der nachfolgenden Box.
- Unterer Außenabstand einer Box und unterer Außenabstand der letzten Kind-Box.
- Oberer und unterer Außenabstand einer Box, wenn diese keine Höhe bzw. keinen Inhalt hat.
Fallen positive Außenabstände zusammen, besteht der entstehende Außenabstand aus dem Maximum der zusammengefallenen Außenabstände.
#geschwister-box { background-color: darkgrey; }
#eltern-box { margin-top: 1em; background-color: silvergrey; }
#kind-box { margin-top: 2em; }
<div id="geschwister-box">Geschwister-Box.</div>
<div id="eltern-box">
<div id="kind-box">Kind-Box.</div>
</div>
1em) und der Kind-Box (hier 2em) zusammen. Zwischen der Geschwister-Box und der Eltern-Box entsteht so ein Abstand von 2em. Der Inhalt der Kind-Box scheint dadurch an der oberen Kante der Eltern-Box zu kleben.
Durch die Definition eines oberen Innenabstands oder eines oberen Rahmens für die Eltern-Box können die Außenabstände von Eltern- und Kind-Box bewahrt werden: Zwischen Geschwister- und Eltern-Box entsteht ein Abstand in Höhe von 1em und der Abstand der Kind-Box zur Oberkante der Elternbox beträgt 2em.Fallen positive und negative Abstände zusammen, so wird das Maximum der absoluten Werte der negativen Außenabstände vom Maximum der absoluten Werte der positiven Außenabstände abgezogen.
#kind-box-1 { margin-bottom: -1em; }
#eltern-box-1 { margin-bottom: 2em; }
#eltern-box-2 { margin-top: -3em; }
#kind-box-2 { margin-top: 4em; }
<div id="eltern-box-1">
<div id="kind-box-1">Kind-Box 1.</div>
</div>
<div id="eltern-box-2">
<div id="kind-box-2">Kind-Box 2.</div>
</div>
Allgemeine Ausnahmen[Bearbeiten]
Nicht alle vertikalen Außenabstände fallen zusammen, folgende Ausnahmen gibt es:
- Die Außenabstände, die für das Wurzelelement (in HTML das
html-Element) festgelegt wurden, fallen nicht mit anderen Außenabständen zusammen. - Außenabstände von Boxen, die einen neuen Blockformatierungskontext erzeugen (z. B. Tabellenüberschriften oder Boxen mit einem anderen Wert für
overflowalsvisible) fallen nicht mit den Außenabständen von Kind-Boxen zusammen. - Die Außenabstände von floats, inline-Blöcken und absolut positionierten Boxen fallen nicht mit den Außenabständen anderer Boxen zusammen (also weder mit Abständen benachbarter Boxen noch mit Abständen von Kind-Boxen).
- Der untere Außenabstand einer Box fällt nicht mit dem unteren Außenabstand der letzten Kind-Box zusammen, wenn die Höhe der Elternbox mit
heightfestgelegt wurde.
Zwar ist es nicht unmittelbar ersichtlich, jedoch folgt daraus, dass der untere Außenabstand einer Box mit dem unteren Außenabstand der letzten Kind-Box zusammenfallen darf, selbst wenn der Eltern-Box eine Mindest- min-height oder Maximalhöhe max-height zugewiesen wurde.
Ausnahme Clearance[Bearbeiten]
Erzeugt ein Element Clearance (d. h. das Element wird Aufgrund seiner clear-Eigenschaft unter ein floatendes Element geschoben), so wird verhindert, dass der obere Außenabstand des clearenden Elements mit einem anderen Außenabstand zusammenfällt. Dies kann dazu führen, dass das clearende Element vertikal höher positioniert wird, als es wäre, wenn es die clear-Eigenschaft nicht besäße.
Fallen die Außenabstände eines clearenden Elements ggfs. auch mit den Außenabständen nachfolgender Elemente zusammen, so fällt der dabei entstehende Außenabstand nicht mit dem unteren Außenabstand des Elternelements zusammen.
Anwendung zusammenfallender Außenabstände[Bearbeiten]
Das Prinzip der zusammenfallenden Außenabstände ist relativ komplex und kann bei der Gestaltung von Layouts zum Stolperstein werden. Dennoch handelt es sich um ein wichtiges Verhalten, das oftmals die intuitive Erwartungshaltung von Autoren erfüllt.
@media print {
h3 { margin: 20pt 0; }
p { margin: 12pt 0;}
}
<h3>Überschrift</h3>
<p>Absatz Eins.</p>
<p>Absatz Zwei.</p>
Außenabstände links und rechts[Bearbeiten]
margin-right (Außenabstand rechts)[Bearbeiten]
Sie können den rechten Außenabstand eines Elements festlegen. Wenn das Element einen rechten Nachbarn hat (etwa bei zwei nebeneinanderliegenden Grafiken die erste der beiden), dann bedeutet die Angabe den Abstand zum rechts davon liegenden Element. Wenn das Element keinen rechten Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand relativ zum Elternelement (z. B. zum Seitenrand, der für das body-Element festgelegt ist). Wenn kein übergeordnetes Elternelement mehr da ist (also beim body-Element selbst), dann bezieht sich die Angabe auf den rechten Abstand des Dokumentinhalts vom Anzeigefenster.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin-right</title>
<style>
span { margin-right: 5em; background-color: red; }
</style>
</head>
<body>
<p>Die <span>span-Elemente</span> dieses Absatzes haben einen
<span>rechten Außenabstand von 5em.</span> Zur Veranschaulichung
sind die <span>span-Elemente</span> farbig hervorgehoben.
</p>
</body>
</html>
Mit margin-right können Sie den Abstand nach rechts bestimmen. Erlaubt ist eine Längenangabe sowie die Werte auto oder inherit.
- Der Wert
autosetzt den rechten Abstand auf die gesamte noch zur Verfügung stehende Breite, wirkt sich also ohne Angabe zumargin-leftnicht aus. - Über
margin-left:auto; margin-right:auto;können Block-Elemente zentriert werden. Dafür benötigen Sie aber eine feste Breite des Eltern- oder Vorfahrenelements.
margin-left (Außenabstand links)[Bearbeiten]
Sie können den linken Abstand eines Elements festlegen. Wenn das Element einen linken Nachbarn hat (etwa bei zwei nebeneinanderliegenden Grafiken die zweite der beiden), dann bedeutet die Angabe den Abstand zum links davon liegenden Element. Wenn das Element keinen linken Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand relativ zum Elternelement (z. B. zum Seitenrand, der für das body-Element festgelegt ist). Wenn kein übergeordnetes Elternelement mehr da ist (also beim body-Element selbst), dann bedeutet die Angabe den linken Abstand des Dokumentinhalts vom Anzeigefenster.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin-left</title>
<style>
span { margin-left: 5em; background-color: red; }
</style>
</head>
<body>
<p>Die <span>span-Elemente</span> dieses Absatzes haben einen
<span>linken Außenabstand von 5em.</span> Zur Veranschaulichung
sind die <span>span-Elemente</span> farbig hervorgehoben.
</p>
</body>
</html>
Mit margin-left können Sie den Abstand nach links bestimmen. Erlaubt ist eine Längenangabe oder der Wert auto oder inherit.
auto setzt den linken Abstand auf die gesamte noch zur Verfügung stehende Breite, kann also zur rechtsbündigen Ausrichtung von Block-Elementen verwendet werden.margin (Außenabstand allgemein)[Bearbeiten]
Diese Angabe ist eine Zusammenfassung der möglichen Einzelangaben margin-top, margin-right, margin-bottom und margin-left. Solcherart Eigenschaften bezeichnet man auch als zusammenfassende Eigenschaften (shorthand properties).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin</title>
<style>
.typA { margin: 1cm; background-color:#99FF99; }
.typB { margin: 1cm 2cm; background-color:#FFFF99; }
.typC { margin: 1cm 2cm 3cm; background-color:#99FFFF; }
.typD { margin: 1cm 2cm 3cm 4cm; background-color:#FF99FF; }
</style>
</head>
<body>
<hr>
<div class="typA"><h1>typA mit margin: 1cm</h1></div>
<hr>
<div class="typB"><h1>typB mit margin: 1cm 2cm</h1></div>
<hr>
<div class="typC"><h1>typC mit margin: 1cm 2cm 3cm</h1></div>
<hr>
<div class="typD"><h1>typD mit margin: 1cm 2cm 3cm 4cm</h1></div>
<hr>
</body>
</html>
Mit margin können Sie den Abstand für oben, rechts, unten und links bestimmen. Erlaubt sind ein bis vier Längenangaben sowie die Werte auto oder inherit.
- Eine Angabe: für alle 4 Abstände gilt derselbe Wert
- Zwei Angaben: 1. Wert für margin-top und margin-bottom, 2. Wert für margin-left und margin-right
- Drei Angaben: 1. Wert für margin-top, 2. Wert für margin-left und margin-right, 3. Wert für margin-bottom
- Vier Angaben: 1. Wert für margin-top, 2. Wert für margin-right, 3. Wert für margin-bottom, 4. Wert für margin-left
Siehe auch[Bearbeiten]
- Referenz: margin
