margin-top

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die margin-top CSS Eigenschaft legt den Randbereich oben an einem Element fest. Ein positiver Wert platziert es weiter weg von seinen Nachbarn, während ein negativer Wert es näher platziert.

Probieren Sie es aus

Diese Eigenschaft hat keine Auswirkung auf nicht-ersetzte Inline-Elemente, wie z.B. <span> oder <code>.

Syntax

css

/* <length> values */
margin-top: 10px; /* An absolute length */
margin-top: 1em; /* relative to the text size */
margin-top: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-top: auto;

/* Global values */
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: revert-layer;
margin-top: unset;

Die margin-top Eigenschaft wird als das Schlüsselwort auto, oder eine <length>, oder ein <percentage> angegeben. Der Wert kann positiv, null oder negativ sein.

Werte

<length>: Die Größe des Außenabstands als fester Wert.
<percentage>: Die Größe des Außenabstands als Prozentangabe, bezogen auf die Inline-Größe (Breite in einer horizontalen Sprache, definiert durch writing-mode) des umgebenden Blocks.
auto: Der Browser wählt einen geeigneten Wert aus. Siehe margin.

Formale Definition

Initialer Wert	`0`
Anwendbar auf	alle Elemente außer Elemente mit Tabellen-`display`-Typen, die nicht `table-caption`, `table` und `inline-table` entsprechen. Auch anwendbar auf `::first-letter`.
Vererbt	Nein
Prozentwerte	bezieht sich auf die Breite des äußeren Elements
Berechneter Wert	der Prozentwert wie angegeben oder die absolute Länge
Animationstyp	Längenangabe

Formale Syntax

margin-top = 
  <length-percentage>  |
  auto                 |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline

Beispiele

Positive und negative obere Abstände setzen

css

.content {
  margin-top: 5%;
}
.side-box {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}

Spezifikationen

Specification
CSS Box Model Module Level 3 # margin-physical

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

margin-right, margin-bottom, und margin-left
margin Kurzschreibweise
margin-block-start, margin-block-end, margin-inline-start, und margin-inline-end
margin-block und margin-inline Kurzschreibweisen
CSS Box-Modell Modul