CSS margin-Eigenschaft — Syntax, Werte und Beispiele

Die CSS-Eigenschaft margin erzeugt Abstand außerhalb des Rahmens eines Elements — den Zwischenraum zwischen diesem Element und seinen Nachbarn. Im Gegensatz zu padding, das Abstand innerhalb des Rahmens hinzufügt, schiebt margin anderen Inhalt vom Element weg.

Diese Seite behandelt die Kurzschreibweise, wie das Ein-bis-Vier-Werte-Muster funktioniert, Zentrierung mit auto, negative Abstände und die Margin-Collapsing-Regel, die die meisten Einsteiger überrascht.

Wofür margin eine Kurzschreibweise ist

Die Eigenschaft margin ist eine Kurzschreibweise, die alle vier einzelnen Seiteneigenschaften in einer Deklaration setzt:

Das Ein-bis-Vier-Werte-Muster

Da margin eine Kurzschreibweise ist, legt die Anzahl der angegebenen Werte fest, auf welche Seiten sie angewendet werden. Die Werte werden immer im Uhrzeigersinn beginnend oben angewendet (oben → rechts → unten → links):

Vier Werte — margin: 25px 10px 15px 20px; setzt oben 25px, rechts 10px, unten 15px, links 20px.
Drei Werte — margin: 15px 10px 20px; setzt oben 15px, rechts und links 10px, unten 20px.
Zwei Werte — margin: 15px 10px; setzt oben und unten 15px, rechts und links 10px.
Ein Wert — margin: 15px; wendet 15px auf alle vier Seiten an.

Eine praktische Merkhilfe für die Vier-Werte-Form ist das Wort TRouBLe (Top, Right, Bottom, Left).

Info

Negative Werte sind gültig.

Info

Die oberen und unteren Abstände haben keine Wirkung auf Inline-Elemente wie <span> oder <code>.

Anfangswert	0
Gilt für	Alle Elemente.
Vererbbar	Nein.
Animierbar	Ja. margin ist animierbar.
Version	CSS1
DOM-Syntax	Object.style.margin = "20px 10px";

Syntax

Syntax der CSS margin-Eigenschaft

margin: length | auto | initial | inherit;

Beispiel der margin-Eigenschaft:

Beispiel der CSS margin-Eigenschaft mit vier Werten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: #fff;
        margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Paragraph with background-color, color and margin properties.</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel der margin-Eigenschaft, bei dem der Abstand eines Elements für alle Seiten auf 10 % gesetzt wird:

Beispiel der CSS margin-Eigenschaft mit %-Wert (Prozent)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Probier es selbst »

Beispiel der margin-Eigenschaft mit „em":

Beispiel der CSS margin-Eigenschaft mit em-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Probier es selbst »

Schauen wir uns das folgende Beispiel an, das den Unterschied zwischen den Eigenschaften margin, padding und border verdeutlicht:

Beispiel der margin-Eigenschaft mit den Eigenschaften padding und border:

Beispiel der CSS margin-Eigenschaft mit einem (px-)Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #eee;
        width: 200px;
        border: 20px solid #8ebf42;
        padding: 30px;
        margin: 55px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Probier es selbst »

Ein Block mit `margin: auto` zentrieren

Das Setzen der linken und rechten Abstände auf auto ist der klassische Weg, um ein Block-Level-Element horizontal zu zentrieren, das eine explizite Breite hat. Der Browser teilt den verbleibenden horizontalen Platz gleichmäßig auf beide Seiten auf:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        margin: 0 auto;
        background-color: #1c87c9;
        color: #fff;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">I am centered horizontally.</div>
  </body>
</html>

margin: 0 auto; bedeutet oberer und unterer Abstand 0 sowie auto links und rechts. Beachten Sie, dass auto nur horizontal zentriert — es zentriert nicht vertikal. Für vertikale Zentrierung verwenden Sie Flexbox oder Grid.

Negative Abstände

Abstände akzeptieren negative Werte, die ein Element in Richtung seines Nachbarn ziehen (oder über seinen Container hinaus), anstatt es davon wegzuschieben. Das ist nützlich zum Überlappen von Elementen oder zum Verschieben eines Elements über den Innenabstand seines Elternelements hinaus:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .second {
        margin-top: -20px;
        background-color: #8ebf42;
        color: #fff;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>First paragraph.</p>
    <p class="second">This paragraph is pulled up to overlap the one above.</p>
  </body>
</html>

Margin Collapsing

Wenn die oberen und unteren Abstände zweier Block-Elemente vertikal aufeinandertreffen, addieren sie sich nicht — stattdessen kollabieren sie zu einem einzigen Abstand, der dem größeren der beiden entspricht. Ein Absatz mit margin-bottom: 30px;, gefolgt von einem mit margin-top: 20px;, ergibt daher einen Zwischenraum von 30px, nicht 50px.

Info

Margin Collapsing betrifft nur vertikale (obere/untere) Abstände von Block-Level-Boxen im normalen Fluss. Linke und rechte Abstände kollabieren nie, und Abstände von Flex- oder Grid-Elementen kollabieren nicht.

Werte

Wert	Beschreibung	Ausprobieren
auto	Setzt den Abstand. Dies ist der Standardwert dieser Eigenschaft.	Ausprobieren »
length	Definiert einen Abstand in px, pt, cm usw. Der Standardwert ist 0.	Ausprobieren »
%	Setzt den Abstand in % des enthaltenden Elements.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausprobieren »
inherit	Erbt die Eigenschaft vom Elternelement.

Übung

Welche der folgenden Aussagen über CSS-Margins sind korrekt?

Margins werden verwendet, um Abstand um Elemente herum zu erzeugen, außerhalb aller definierten Rahmen.Margins haben keine Eigenschaften.Mit CSS haben Sie die vollständige Kontrolle über die Margins.Es gibt Eigenschaften zum Festlegen des Abstands für jede Seite eines Elements (oben, rechts, unten und links).Margins sind immer transparent.Sie können negative Werte verwenden, um Überlappungseffekte zu erzeugen.Die margin-clear-Eigenschaft ermöglicht das Festlegen des Abstands eines Elements.

Wofür margin eine Kurzschreibweise ist

Das Ein-bis-Vier-Werte-Muster

Syntax

Beispiel der margin-Eigenschaft:

Ergebnis

Beispiel der margin-Eigenschaft, bei dem der Abstand eines Elements für alle Seiten auf 10 % gesetzt wird:

Beispiel der margin-Eigenschaft mit „em":

Beispiel der margin-Eigenschaft mit den Eigenschaften padding und border:

Ein Block mit margin: auto zentrieren

Negative Abstände

Margin Collapsing

Werte

Übung

Ein Block mit `margin: auto` zentrieren