Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 Juli 2015.
* Some parts of this feature may have varying levels of support.
Diemargin-topCSS Eigenschaft setzt denRandbereich oben an einem Element. Ein positiver Wert platziert es weiter von seinen Nachbarn entfernt, während ein negativer Wert es näher platziert.
Probieren Sie es aus
margin-top: 1em;margin-top: 10%;margin-top: 10px;margin-top: 0;<section> <div> <div></div> <div></div> <div></div> </div></section>#container { width: 300px; height: 200px; display: flex; align-content: flex-start; flex-direction: column; justify-content: flex-start;}.row { height: 33.33%; display: inline-block; border: solid #ce7777 10px; background-color: #2b3a55; flex-shrink: 0;}#example-element { border: solid 10px #ffbf00; background-color: #2b3a55;}Diese Eigenschaft hat keine Auswirkung aufnicht-ersetzte Inline-Elemente, wie<span> oder<code>.
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(--my-anchor 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;Diemargin-top Eigenschaft wird entweder als Schlüsselwortauto, oder als<length>, oder<percentage> angegeben. Ihr Wert kann positiv, null oder negativ sein.
Werte
<length>Die Größe des Randes als fester Wert.
- Fürankerpositionierte Elemente löst sich die
anchor-size()Funktion zu einem<length>Wert relativ zur Breite oder Höhe des zugehörigenAnkerelements auf (sieheElementrand basierend auf Ankergröße setzen).
- Fürankerpositionierte Elemente löst sich die
<percentage>Die Größe des Randes als Prozentwert, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode) desumschließenden Blocks.autoDer Browser wählt einen geeigneten Wert aus. Siehe
margin.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | alle Elemente außer Elemente mit Tabellen-display-Typen, die nichttable-caption,table undinline-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 Ränder setzen
.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
Siehe auch
margin-right,margin-bottom, undmargin-leftmarginKurzschreibweisemargin-block-start,margin-block-end,margin-inline-start, undmargin-inline-endmargin-blockundmargin-inlineKurzschreibweisen- CSS-Box-Modell Modul