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.
Die margin-top CSS Eigenschaft setzt den Randbereich 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 id="default-example"> <div id="container"> <div class="row"></div> <div class="row transition-all" id="example-element"></div> <div class="row"></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 auf nicht-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; Die margin-top Eigenschaft wird entweder als Schlüsselwort auto, 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ür ankerpositionierte Elemente löst sich die
anchor-size()Funktion zu einem<length>Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Elementrand basierend auf Ankergröße setzen).
- Für ankerpositionierte 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) des umschließenden Blocks. auto-
Der 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 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 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