CSS/Tutorials/Boxmodell/margin

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Boxmodell(Weitergeleitet von Collapsing margins)
Wechseln zu: Navigation, Suche
Außenrand oder -abstand (margin) ist ein erzwungener Leerraum zwischen dem aktuellen Element und seinem Eltern- bzw. seinen Nachbarelementen.

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:

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.

Beachten Sie, dass die Grafik Breite und Höhe lediglich für den Fall darstellt, dass die Eigenschaft box-sizing den Wert content-box hat oder nicht gesetzt ist.
Beachten Sie: Tabellenelementen außer table sowie Elementen, die durch display: table-... als solche formatiert wurden, können keine Außenabstände zugewiesen werden.
Beachten Sie: Die 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.

Beispiel ansehen …
<!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).

Beachten Sie:
  • Bei Verwendung im main-Element bestimmt margin-top den Abstand zum oberen Rand.
  • Der Wert auto entspricht dem Ausgangswert für diese Eigenschaft, setzt also lediglich einen zuvor definierten Wert zurück.
  • Bei Inline-Elementen sind margin-top und margin-bottom wirkungslos.

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.

Beispiel ansehen …
<!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).

Beachten Sie:
  • Bei Verwendung im main-Element bestimmt margin-bottom den Abstand zum unteren Rand des main-Elements.
  • Der Wert auto entspricht dem Ausgangswert für diese Eigenschaft, setzt also lediglich einen zuvor definierten Wert zurück.
  • Bei Inline-Elementen sind margin-top und margin-bottom wirkungslos.

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 static abweichende Positionierung hat oder per float aus dem Elementfluss entfernt wurde, werden beide Abstandsangaben berücksichtigt.
Beispiel
...
<style>
  #id1 { margin-bottom: 80px; }
  #id2 { margin-top:    20px; }
</style>
...
<body>
  <div id="id1">Text</div>
  <div id="id2">Text</div>
</body>
...
Die beiden Div-Elemente haben einen Abstand von 100px.
  • Falls sich beide Elemente im normalen Elementfluss befinden und beide margin-Angaben das gleiche Vorzeichen haben, wird derjenige der beiden margin-Werte berücksichtigt, der den gößeren Betrag hat.
Beispiel
...
<style>
  #id1 { margin-bottom: 80px; }
  #id2 { margin-top:    20px; }
</style>
...
<body>
  <div id="id1">Text</div>
  <div id="id2">Text</div>
</body>
...
Die beiden Div-Elemente haben einen Abstand von 80px.
Beispiel
...
<style>
  #id1 { margin-bottom: -80px; }
  #id2 { margin-top:    -20px; }
</style>
...
<body>
  <div id="id1">Text</div>
  <div id="id2">Text</div>
</body>
...
Die beiden Div-Elemente haben einen (gerichteten) Abstand von -80px (-80 ist die Zahl mit dem größeren Betrag. Die beiden Divs tauschen hier ihre Position, der Abstand zwischen der Oberkante von "id2", welches das obere ist, und der Unterkante von "id1" beträgt 80px.)
  • 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.
Beispiel
...
<style>
  #id1 { margin-bottom:  80px; }
  #id2 { margin-top:    -20px; }
</style>
...
<body>
  <div id="id1">Text</div>
  <div id="id2">Text</div>
</body>
...
Die beiden Div-Elemente haben einen Abstand von 60px. (80 + (-20) = 60)
Beispiel
...
<style>
  #id1 { margin-bottom: -80px; }
  #id2 { margin-top:     20px; }
</style>
...
<body>
  <div id="id1">Text</div>
  <div id="id2">Text</div>
</body>
...
Die beiden Div-Elemente haben einen (gerichteten) Abstand von -60px. ((-80) + 20 = -60, die beiden Divs tauschen hier ihre Position, der Abstand zwischen der Oberkante von "id2", welches das obere ist, und der Unterkante von "id1" beträgt 60px.)

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.
Beispiel
...
<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>
...
Das Div-Element "id2" hat vom Objekt "oben" einen Abstand von 100px ggf. zuzüglich 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.
Beispiel
...
<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>
...
Das Div-Element "id2" hat vom Objekt "oben" einen Abstand von 80px.
Beispiel
...
<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>
...
Der obere Rand von "id2" befindet sich jetzt oberhalb des unteren Randes von "oben". Der Abstand des oberen Randes von "id2" zum unteren Rand von "oben" beträgt 80px.
  • 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.
Beispiel
...
<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>
...
Das Div-Element "id2" hat vom Objekt "oben" einen Abstand von 60px. (80 + (-20) = 60)
Beispiel
...
<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>
...
Der obere Rand von "id2" befindet sich jetzt oberhalb des unteren Randes von "oben". Der Abstand des oberen Randes von "id2" zum unteren Rand von "oben" beträgt 60px. ((-80) + 20 = -60)

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.

Hinweis:
Das erste in der Liste genannte Paar führt manchmal zu Verwirrung. Aus Sicht von Autoren wird oft gewünscht, dass der festgelegte Außenabstand einer Kind-Box von der Eltern-Box umschlossen wird. Dieses gestalterische Ziel kann durch das Festlegen eines oberen Innenabstands oder eines oberen Rahmens für die Eltern-Box erreicht werden.


Beispiel
#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>
In diesem Beispiel fallen die oberen Außenabstände der Eltern-Box (hier 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.

Beispiel
#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>
Dieses Beispiel zeigt vier benachbarte Außenabstände. Zunächst wird das Maximum der positiven Außenabstände ermittelt (mathematisch max(2em, 4em) = 4em), anschließend das absolute Maximum der negativen Außenabstände (mathematisch max(|-1em|, |-3em|) = 3em). Das negative Maximum wird vom positiven Maximum abgezogen (4em minus 3em = 1em), d. h. zwischen beiden Eltern-Boxen entsteht ein Abstand von 1em.

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 overflow als visible) 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 height festgelegt wurde.
Beachten Sie:

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.

Hauptartikel: CSS/Tutorials/Ausrichtung

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.

Beispiel
@media print {
 h3 { margin: 20pt 0; }
 p { margin: 12pt 0;}
}
<h3>Überschrift</h3>
<p>Absatz Eins.</p>
<p>Absatz Zwei.</p>
In diesem Beispiel besitzt das Überschriftenelement einen größeren vertikalen Außenabstand als die Absatzelemente. Ziel der Definition ist es, die Überschrift von den Absätzen etwas abzuheben. Der gewünschte Abstand zwischen Überschrift und Absatz beträgt dabei 20 Punkte. Diese Darstellung wird jedoch nur erreicht, wenn die Außenabstände zusammenfallen. Der Vorteil liegt darin, dass bei der Gestaltung der Überschrift die Gestaltung der Absätze nicht berücksichtigt werden muss. Auch die Abstände der Absätze zueinander entsprechen mit 12 Punkten eher dem Autorenwunsch als ein kumulierter Abstand von 24 Punkten.
Hinweis:
Das Konzept der zusammenfallenden Außenabstände ist nicht nur in CSS bekannt. Ein ähnliches Verhalten können Sie auch in verschiedenen Textverarbeitungsprogrammen beobachten.

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.

Beispiel ansehen …
<!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.

Beachten Sie:
  • Der Wert auto setzt den rechten Abstand auf die gesamte noch zur Verfügung stehende Breite, wirkt sich also ohne Angabe zu margin-left nicht 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.

Beispiel ansehen …
<!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.

Beachten Sie: Der Wert 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).

Beispiel ansehen …
<!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
Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

Siehe auch[Bearbeiten]