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.
* Some parts of this feature may have varying levels of support.
Die margin-top
-CSS-Eigenschaft legt den Außenabstand oberhalb eines Elements fest. Ein positiver Wert vergrößert den Abstand zu benachbarten Elementen, während ein negativer Wert ihn verringert.
Probieren Sie es aus
Syntax
/* <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 */
margin-top: anchor-size(height);
margin-top: calc(anchor-size(--myAnchor self-inline, 25px) / 4);
/* 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 Schlüsselwort auto
, oder als <length>
, bzw. <percentage>
angegeben. Der Wert kann positiv, null oder negativ sein.
Werte
<length>
-
Die Größe des Außenabstands als fester Wert.
- Für ankerpositionierte Elemente wird die Funktion
anchor-size()
zu einem<length>
-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements aufgelöst (siehe Festlegen des Außenabstands eines Elements basierend auf der Ankergröße).
- Für ankerpositionierte Elemente wird die Funktion
<percentage>
-
Die Größe des Außenabstands als Prozentsatz, relativ zur Inline-Größe (Breite bei einer horizontalen Sprache, definiert durch
writing-mode
) des umgebenden Blocks. auto
-
Der Browser wählt einen geeigneten Wert. Siehe
margin
.
Formale Definition
Anfangswert | 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 Außenabstände festlegen
.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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
margin-top | ||||||||||||
anchor-size() | ||||||||||||
auto |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
Siehe auch
margin-right
,margin-bottom
, undmargin-left
margin
Kurzschreibweisemargin-block-start
,margin-block-end
,margin-inline-start
, undmargin-inline-end
margin-block
undmargin-inline
Kurzschreibweisen- CSS-Box-Modell-Modul