CSS-Eigenschaft margin-bottom

Die Eigenschaft margin-bottom definiert die untere Margin des Elements. Negative Werte sind erlaubt.

Wenn nicht ersetzte Inline-Elemente (wie <tt> oder <span>) verwendet werden, hat die CSS-Eigenschaft margin-bottom keinen Einfluss.

Anfangswert	0
Gilt für	Alle Elemente. Es gilt auch für ::first-letter.
Geerbt	Nein
Animierbar	Ja, die untere Margin des Elements ist animierbar.
Version	CSS2
DOM Syntax	object.style.marginBottom = "70px";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .bottom { margin-bottom: 100px;}
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft margin-bottom</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
    <p class="bottom">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel, wo die untere Margin des Elements durch "4em" definiert ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .bottom { margin-bottom: 4em;}
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft margin-bottom</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
    <p class="bottom">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel, wo die untere Margin des Elements durch "px", "em" und "%" definiert ist, um die Unterschiede zwischen den Werten anzuzeigen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p.p1 {
      margin-bottom: 5em;
      }
      p.p2 {
      margin-bottom: 20%;
      }
      p.p3 {
      margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft margin-bottom</h2>
    <p>Ein Absatz, wo keine Margin angegeben ist.</p>
    <p class="p1">Die untere Margin ist auf 5em eingestellt.</p>
    <p class="p2">Die untere Margin ist auf 20% eingestellt.</p>
    <p class="p3">Die untere Margin ist auf 20px eingestellt.</p>
    <p>Ein Absatz, wo keine Margin angegeben ist.</p>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
auto	Stellt die untere Margin ein. Es ist der Standardwert dieser Eigenschaft.
length	Definiert die untere Margin in px, pt, cm usw. Der Standardwert ist 0.
%	Stellt die untere Margin des enthaltenden Elements in % ein.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.