W3docs
de
Anmelden

CSS Margin

Mit der CSS-Eigenschaft margin wird Abstand um ein HTML-Element außerhalb des Rahmens erzeugt. Die Eigenschaften sind top, bottom, left und right.

Die CSS-Eigenschaft margin erzeugt Abstand um ein Element herum — außerhalb seines Rahmens. Im Gegensatz zu padding, das Abstand innerhalb des Rahmens (zwischen Inhalt und Rahmen) hinzufügt, schiebt margin benachbarte Elemente weg. Margin ist immer transparent: Es zeigt nie eine Hintergrundfarbe, sondern fügt nur leeren Raum hinzu.

Dieses Kapitel behandelt die vier einzelnen Seiteneigenschaften, die margin-Kurzschreibweise (ein bis vier Werte), die speziellen Werte auto und inherit, die Berechnung von prozentualen Margins, negative Margins sowie die Margin-Kollaps-Regel, die fast jeden beim ersten Auftreten überrascht.

Die einzelnen Seiten

Mit den folgenden Eigenschaften kann man den Margin für jede Seite eines Elements festlegen:

Es ist bereits klar, dass für die obere Seite margin-top, für die untere margin-bottom, für die linke margin-left und für die rechte margin-right verwendet wird.

Alle Margin-Eigenschaften akzeptieren die folgenden Werte:

  • auto – der Margin wird vom Browser berechnet (wird verwendet, um Block-Elemente horizontal zu zentrieren),
  • length – gibt einen Margin in px, pt, cm, rem, em usw. an,
  • % – gibt einen Margin als Prozentsatz der Breite des umschließenden Elements an,
  • inherit – gibt an, dass der Margin vom übergeordneten Element geerbt werden soll.

Ein feiner, aber wichtiger Hinweis: Prozentuale Margins beziehen sich immer auf die Breite des umschließenden Blocks, auch bei margin-top und margin-bottom. margin-top: 10% innerhalb eines 600px breiten Containers ergibt also 60px, nicht 10% der Höhe.

Margin kann auch negative Werte annehmen, die ein Element näher an seine Nachbarn heranziehen (oder darüber hinaus). Siehe Negative Margins weiter unten.

Margin als Kurzschreibweise

Die CSS-Eigenschaft margin ist eine Kurzschreibweise für die folgenden einzelnen Margin-Eigenschaften:

Wenn die Eigenschaft margin vier verschiedene Werte hat, sieht das im Code so aus:

CSS unterschiedliche Margins

p {
  margin-top: 25px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
}

Wenn alle Seiten denselben Wert haben – zum Beispiel alle Seiten 50px –, kann man das in CSS so schreiben:

CSS gleiche Margins, Code

p {
  margin: 50px;
}

Wenn die obere und untere Seite denselben Wert haben (z. B. 15px) und die linke und rechte Seite ebenfalls denselben Wert (z. B. 10px), kann folgender Code verwendet werden:

CSS Margin mit 2 Werten, Code

p {
  margin: 15px 10px;
}

Das entspricht:

CSS Margin mit 2 Werten, ausführlicher Code

p {
  margin-top: 15px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 10px;
}

Wenn die linke und rechte Seite gleich sind (z. B. 15px), die obere Seite 5px und die untere Seite 10px, kann man schreiben:

CSS Margin mit 3 Werten, Code

p {
  margin: 5px 15px 10px;
}

Das entspricht:

CSS Margin mit 3 Werten, ausführlicher Code

p {
  margin-top: 5px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

Beispiel der margin-Eigenschaft:

CSS margin-Eigenschaft, Code

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: white;
        margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <p>Paragraph with background-color, color and margin properties.</p>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS Margin-Eigenschaft

Der auto-Wert der margin-Eigenschaft

Ein Element kann innerhalb seines Containers horizontal zentriert werden, indem die Eigenschaft margin auf auto gesetzt wird. Das Element nimmt dann seine definierte Breite ein, und der verbleibende Raum wird gleichmäßig auf den rechten und linken Margin verteilt.

Beispiel der margin-Eigenschaft mit dem Wert "auto":

Beispiel zur Verwendung des Werts "auto" der margin-Eigenschaft:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        margin: auto;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h2>The auto value</h2>
    <p>
      Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
    </p>
    <div>
      The auto value horizontally centered this div.
    </div>
  </body>
</html>
Probier es selbst »

Der inherit-Wert der margin-Eigenschaft

Im folgenden Beispiel wird der linke Margin des <p>-Elements von seinem übergeordneten Element (<div>) geerbt:

Beispiel der margin-Eigenschaft mit dem Wert "inherit":

Beispiel zur Verwendung des Werts "inherit" der margin-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: lightblue;
        margin-left: 100px;
      }
      p.inherit {
        margin-left: inherit;
        padding: 10px 0;
      }
    </style>
  </head>
  <body>
    <h2>The inherit value</h2>
    <p>
      Here the left margin is inherited from its parent element:
    </p>
    <div>
      <p class="inherit">
        With the help of the "inherit" value, the left margin is inherited from the div element.
      </p>
    </div>
  </body>
</html>
Probier es selbst »

Margin-Kollaps

Wenn zwei vertikale Margins aufeinandertreffen, addieren sie sich nicht – sie kollabieren zu einem einzigen Margin, der dem größeren der beiden entspricht. Das ist die häufigste Überraschung beim Umgang mit Margins: Wenn ein Absatz margin-bottom: 30px hat und der nächste margin-top: 20px, beträgt der Abstand zwischen ihnen 30px, nicht 50px.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .top    { margin-bottom: 30px; background: #1c87c9; color: #fff; }
      .bottom { margin-top: 20px;    background: #2eae44; color: #fff; }
    </style>
  </head>
  <body>
    <p class="top">My bottom margin is 30px.</p>
    <p class="bottom">My top margin is 20px. The gap between us is 30px, not 50px.</p>
  </body>
</html>

Einige wichtige Regeln:

  • Nur obere und untere Margins kollabieren. Linke und rechte (horizontale) Margins kollabieren nie – sie addieren sich immer.
  • Ein Elternelement und sein erstes/letztes Kind können gemeinsam kollabieren, sofern sie nicht durch einen Rahmen, Padding, overflow (ungleich visible) oder einen Flex-/Grid-Container getrennt werden.
  • Leere Elemente kollabieren ihren eigenen oberen und unteren Margin zu einem einzigen.

Wenn ein garantierter Abstand benötigt wird, empfiehlt sich padding, ein Rahmen oder ein Flex-/Grid-Layout mit gap – Margins innerhalb von Flex- und Grid-Containern kollabieren nicht.

Negative Margins

Ein negativer Margin zieht ein Element in Richtung des Margins und überlappt dabei oft einen Nachbar. Ein negativer margin-top oder margin-left verschiebt das Element selbst; ein negativer margin-right oder margin-bottom zieht den nachfolgenden Inhalt näher heran.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        background-color: #1c87c9;
        color: #fff;
        padding: 10px;
      }
      .pulled {
        margin-top: -15px;
      }
    </style>
  </head>
  <body>
    <div class="box">First box</div>
    <div class="box pulled">This box is pulled 15px up to overlap the first one.</div>
  </body>
</html>

Negative Margins sind nützlich, um Karten zu überlappen, ein Element aus dem Padding seines Containers herauszuziehen oder die Ausrichtung fein abzustimmen – sollten jedoch sparsam eingesetzt werden, da sie schwer zu debuggende Überlappungen verursachen können.

Logische Margin-Eigenschaften

Modernes CSS bietet auch logische Eigenschaften, die der Schreibrichtung des Texts folgen statt physischer Bildschirmseiten – nützlich für Websites, die sowohl Links-nach-rechts- als auch Rechts-nach-links-Sprachen unterstützen:

  • margin-inline-start / margin-inline-end – Anfang/Ende der Inline-(Text-)Achse,
  • margin-block-start / margin-block-end – Anfang/Ende der Block-Achse,
  • margin-inline- und margin-block-Kurzschreibweise (z. B. margin-inline: auto zum horizontalen Zentrieren in LTR und RTL gleichermaßen).

Auf einer Standard-Links-nach-rechts-Seite verhält sich margin-inline-start wie margin-left und margin-block-start wie margin-top, aber sie drehen sich bei Rechts-nach-links-Inhalten automatisch um.

Verwandte Kapitel

Übungen

Übung
Welche Eigenschaften können mit CSS Margin gesetzt werden?
Welche Eigenschaften können mit CSS Margin gesetzt werden?
Was this page helpful?