margin-top
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
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
| Spezifikation |
|---|
| 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