W3docs
de
Anmelden

CSS margin-bottom Eigenschaft

Die CSS-Eigenschaft margin-bottom legt den unteren Außenabstand eines Elements fest. Erfahren Sie mehr mit Beispielen.

Die CSS-Eigenschaft margin-bottom legt den Abstand unterhalb eines Elements fest – zwischen dessen unterem Rand und dem nächsten Element im Fluss. Der Außenabstand ist transparent: Er drängt benachbarte Inhalte weg, hat aber selbst weder einen Hintergrund noch einen Rahmen. Diese Seite behandelt die Syntax, die zulässigen Einheiten, die überraschend wichtige Regel des Margin Collapsing sowie den Zusammenhang von margin-bottom mit den übrigen Margin-Eigenschaften.

Verwenden Sie margin-bottom, wenn Sie nach einem Element vertikalen Freiraum benötigen – beispielsweise für den Abstand zwischen gestapelten Absätzen, die Trennung einer Überschrift vom darunter stehenden Text oder einen Abstand unterhalb einer Karte.

Info

Negative Werte sind gültig (z. B. margin-bottom: -10px;) und ziehen das nachfolgende Element nach oben, sodass es überlappen kann.

Info

margin-bottom hat keine Wirkung auf nicht-ersetzte Inline-Elemente wie <span> oder <a>. Um vertikale Außenabstände auf sie anzuwenden, setzen Sie zuerst display: inline-block oder display: block.

margin-bottom ist eine der vier Seiten, die durch die Kurzschreibweise margin gesteuert werden; das vertikale Gegenstück ist margin-top.

Ausgangswert0
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbbarNein.
AnimierbarJa. Der untere Außenabstand des Elements ist animierbar.
VersionCSS2
DOM-Syntaxobject.style.marginBottom = "70px";

Syntax

Syntax der CSS margin-bottom Eigenschaft

margin-bottom: length | percentage | auto | initial | inherit;

Der Wert kann auf verschiedene Arten angegeben werden:

  • length — eine feste Größe in px, em, rem, pt, cm usw. em bezieht sich auf die Schriftgröße des Elements selbst, rem auf die Schriftgröße des Wurzelelements.
  • percentage — ein Bruchteil der Breite des umgebenden Blocks (nicht dessen Höhe); ein prozentualer unterer Außenabstand skaliert also mit der Breite des Elternelements.
  • auto — der Browser berechnet den Wert; für margin-bottom ergibt dies fast immer 0.
  • initial / inherit — setzt auf den Standardwert (0) zurück oder übernimmt den Wert vom Elternelement.

Beispiel der margin-bottom Eigenschaft:

Beispiel der CSS margin-bottom Eigenschaft mit px-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .bottom {
        margin-bottom: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="bottom">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 »

Ergebnis

CSS margin-bottom Eigenschaft

Beispiel der margin-bottom Eigenschaft mit dem Wert „4em":

Beispiel der CSS margin-bottom Eigenschaft mit em-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .bottom {
        margin-bottom: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="bottom">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-bottom Eigenschaft in „px", „em" und „%":

Beispiel der CSS margin-bottom Eigenschaft mit px-, em- und %-Werten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.p1 {
        margin-bottom: 5em;
      }
      p.p2 {
        margin-bottom: 20%;
      }
      p.p3 {
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>A paragraph with no margins specified.</p>
    <p class="p1">Bottom margin is set to 5em.</p>
    <p class="p2">Bottom margin is set to 20%.</p>
    <p class="p3">Bottom margin is set to 20px.</p>
    <p>A paragraph with no margins specified.</p>
  </body>
</html>
Probier es selbst »

Margin Collapsing

Eine häufige Überraschung: Wenn margin-bottom eines Blocks auf margin-top des nächsten trifft, addieren sich die beiden nicht. Stattdessen kollabieren sie zu einem einzigen Außenabstand, der dem größeren der beiden entspricht. Collapsing gilt nur für vertikale (obere und untere) Außenabstände von Block-Level-Boxen – horizontale Außenabstände kollabieren nie.

Margin Collapse

p.one {
  margin: 20px 0;
}

p.two {
  margin: 35px 0;
}

Im obigen Code hat <p class="one"> einen vertikalen Außenabstand von 20px und <p class="two"> einen vertikalen Außenabstand von 35px. Man könnte erwarten, dass der Abstand zwischen ihnen 20 + 35 = 55px beträgt. Aufgrund des Margin Collapsing beträgt der tatsächliche Abstand jedoch 35px – der größere der beiden Werte.

Um zu verhindern, dass zwei Außenabstände kollabieren, trennen Sie sie durch etwas: Fügen Sie dem Elternelement einen Rahmen oder Innenabstand hinzu, oder platzieren Sie die Elemente in unterschiedlichen Formatierungskontexten (z. B. durch Setzen von display: flex oder display: grid am Container, wo Außenabstände nie kollabieren).

Beispiel eines Margin Collapse:

Beispiel des Margin Collapse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.one {
        margin: 20px 0;
      }
      p.two {
        margin: 35px 0;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="two">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 »

Werte

WertBeschreibungAusprobieren
autoLegt den unteren Außenabstand fest. Dies ist der Standardwert der Eigenschaft.Ausprobieren »
lengthDefiniert einen unteren Außenabstand in px, pt, cm usw. Standardwert ist 0.Ausprobieren »
%Legt den unteren Außenabstand in % des umgebenden Elements fest.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.Ausprobieren »
inheritErbt die Eigenschaft vom Elternelement.

Verwandte Eigenschaften

  • margin-top — das vertikale Gegenstück, das den Abstand oberhalb eines Elements festlegt (und mit margin-bottom kollabiert).
  • margin — die Kurzschreibweise, die alle vier Seiten auf einmal festlegt.
  • padding-bottom — Abstand innerhalb des unteren Rands des Elements, innerhalb seines Rahmens.
  • box-sizing — steuert, wie Breite und Höhe gemessen werden; nützlicher Kontext beim Nachdenken über das Box-Modell.

Übung

Übung
Was ist die Funktion der Eigenschaft 'margin-bottom' in CSS?
Was ist die Funktion der Eigenschaft 'margin-bottom' in CSS?
Was this page helpful?