CSS/Eigenschaften/Abstand/margin

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Außenrand oder -abstand (margin) ist ein erzwungener Leerraum zwischen dem aktuellen Element und seinem Eltern- bzw. seinen Nachbarelementen.

Inhaltsverzeichnis

[Bearbeiten] Allgemeines

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:

Empfehlung: zum besseren Verständnis wird das Studium des Artikels zum Box-Modell empfohlen

Boxmodell.png

Sinnvoll sind die hier beschriebenen CSS-Eigenschaften vor allem für HTML-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.

[Bearbeiten] Außenabstände oben und unten

[Bearbeiten] margin-top (Außenabstand oben)

  • IE 3
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Chrome 4
  • CSS 1.0

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>
      h1, p { margin-top: 3em; }
    </style>
  </head>
  <body>
    <h1>Verwendung von <code>margin-top</code></h1>
    <main role="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 ein numerisches Längenmaß 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.

[Bearbeiten] margin-bottom (Außenabstand unten)

  • IE 3
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Chrome 4
  • CSS 1.0

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 role="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 ein numerisches Längenmaß 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.

[Bearbeiten] zusammenfallende Außenabstände

[Bearbeiten] benachbarte Geschwister-Elemente

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.)

[Bearbeiten] Element und Elternelement

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)

[Bearbeiten] Außenabstände links und rechts

[Bearbeiten] margin-right (Außenabstand rechts)

  • IE 3
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Chrome 4
  • CSS 1.0

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 ein numerisches Längenmaß 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.

[Bearbeiten] margin-left (Außenabstand links)

  • IE 3
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Chrome 4
  • CSS 1.0

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 ein numerisches Längenmaß 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.

[Bearbeiten] margin (Außenabstand allgemein)

  • IE 3
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Chrome 4
  • CSS 1.0

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 numerische Längenmaße 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.

[Bearbeiten] Siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke