CSS-Eigenschaft margin-top

Die CSS-Eigenschaft margin-top definiert die obere Margin des Elements

Negative Werte sind erlaubt.

Diese Eigenschaft hat keinen Einfluss auf Inline-Elemente, wie z. B. <span>.

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

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .margin-top { 
      margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft margin-top</h2>
    <p>Keine festgelegte Margin.</p>
    <p class="margin-top">100px Margin ist oben für diesen Text angegeben.</p>
  </body>
</html>

Versuch es selber!

Im folgenden Beispiel wird die margin-top durch "em" angegeben:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p.example {
      margin-top: 5em;
      }
    </style>
  </head>
  <body>
    <h2>Margin-top property example</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
    <p class="example">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!

Werte

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