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>

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>

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>

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.

Browser-Support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Was bestimmt die CSS-Eigenschaft 'margin-bottom'?
Finden Sie das nützlich?