margin-top CSS property
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 CSS-Eigenschaft margin-top legt den Außenrandbereich am oberen Rand eines Elements fest. Ein positiver Wert platziert ihn weiter von seinen Nachbarn entfernt, während ein negativer Wert ihn näher platziert.
Diese Eigenschaft hat keine Auswirkung auf nicht-ersetzte Inline-Elemente wie <span> oder <code>.
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;
}
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 Eigenschaft margin-top wird als Schlüsselwort auto, als <length> oder als <percentage> angegeben. Ihr Wert kann positiv, null oder negativ sein.
Werte
<length>-
Die Größe des Außenrands 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 Element-Außenrands basierend auf der Ankergröße).
- Für ankerpositionierte Elemente wird die Funktion
<percentage>-
Die Größe des Außenrands als Prozentsatz relativ zur Inline-Größe (width in einer horizontalen Sprache, definiert durch
writing-mode) des umgebenden Blocks. auto-
Der Browser wählt einen geeigneten zu verwendenden 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
Festlegen positiver und negativer oberer Außenränder
.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-bottomundmargin-left- Kurzform
margin margin-block-start,margin-block-end,margin-inline-startundmargin-inline-end- Kurzformen
margin-blockundmargin-inline - Modul CSS-Box-Modell