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 margin-top-Eigenschaft in CSS legt den Außenabstand (Margin) am oberen Rand eines Elements fest. Ein positiver Wert entfernt das Element mehr von seinen Nachbarn, 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 zum Beispiel <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 kann mit dem Schlüsselwort auto, als <length> oder als <percentage> angegeben werden. Ihr Wert kann positiv, null oder negativ sein.
Werte
<length>-
Die Größe des Abstands als fester Wert.
- Für ankerpositionierte Elemente löst die Funktion
anchor-size()auf einen<length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Festlegen des Abstands eines Elements basierend auf der Ankergröße).
- Für ankerpositionierte Elemente löst die Funktion
<percentage>-
Die Größe des Abstands als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode) des umfassenden 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
Setzen von positiven und negativen oberen Abständen
.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-leftmarginKurzformmargin-block-start,margin-block-end,margin-inline-start, undmargin-inline-endmargin-blockundmargin-inlineKurzformen- CSS-Box-Modell Modul