CSS margin-top Eigenschaft
Die CSS-Eigenschaft margin-top legt den oberen Außenabstand eines Elements fest. Werte und Beispiele.
Die Eigenschaft margin-top legt die Größe des oberen Außenabstands eines Elements fest — den transparenten Bereich oberhalb seiner Box, zwischen der Oberkante des Elements und dem darüber liegenden Element. Sie ist das vertikale Gegenstück zu margin-bottom und eine der vier Seiten, die gemeinsam durch das margin-Kurzschreibweise gesteuert werden.
Diese Seite erklärt die Werte, die margin-top akzeptiert, sowie die zwei Verhaltensweisen, die Anwender am häufigsten überraschen — vertikales Margin-Kollabieren und prozentuale Werte relativ zur Breite — und zeigt ausführbare Beispiele für jeden Wert.
Diese Eigenschaft hat keine Auswirkung auf nicht-ersetzte Inline-Elemente wie <span>. Um vertikalen Abstand um sie hinzuzufügen, machen Sie sie zuerst zu inline-block oder block.
Vertikales Margin-Kollabieren
Wenn der untere Außenabstand eines Blocks den oberen Außenabstand des nächsten berührt, kollabieren die beiden zu einem einzigen Margin, der dem größeren der beiden entspricht — nicht ihrer Summe. So ergibt ein Absatz mit margin-bottom: 30px, gefolgt von einem mit margin-top: 20px, einen Abstand von 30px zwischen ihnen, nicht 50px.
Das Kollabieren tritt nur zwischen vertikalen Margins auf (oben und unten). Linke und rechte Margins kollabieren nie. Es wird auch durch alles verhindert, was sich zwischen den beiden Margins befindet — ein Rahmen, Innenabstand, ein Inline-Element oder ein Block-Formatierungskontext wie ein Flex-/Grid-Container oder overflow mit einem anderen Wert als visible.
Negative Werte sind erlaubt. Ein negativer margin-top zieht das Element nach oben und überlappt oder verringert den Abstand zum darüber liegenden Element.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Der obere Außenabstand des Elements ist animierbar. |
| Version | CSS2 |
| DOM-Syntax | object.style.marginTop = "50px"; |
Syntax
Syntax der CSS-Eigenschaft margin-top
margin-top: length | auto | initial | inherit;Beispiel der margin-top-Eigenschaft:
Beispiel der CSS-Eigenschaft margin-top mit px-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: 100px;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> 100px margin is specified top for this text.</p>
</body>
</html>Ergebnis
Beispiel der margin-top-Eigenschaft in „em":
Beispiel der CSS-Eigenschaft margin-top mit em-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin-top: 5em;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Beispiel der margin-top-Eigenschaft in „%"
Ein prozentualer margin-top wird relativ zur Breite des umgebenden Blocks berechnet — nicht zu seiner Höhe. Das wird leicht übersehen: margin-top: 10% innerhalb eines 600px breiten Elternelements ergibt 60px und ändert sich, wenn das Elternelement breiter wird, obwohl der Margin vertikal ist.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: 10%;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> 10% margin is specified top for this text.</p>
</body>
</html>Beispiel der margin-top-Eigenschaft mit dem „initial"-Wert:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: initial;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> Margin top is specified for this text.</p>
</body>
</html>Beispiel der margin-top-Eigenschaft mit dem „inherit"-Wert:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-top: 50px;
}
.margin-top {
margin-top: inherit;
background-color: lime;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<div>
Here is some text.
<p class="margin-top"> Margin top is specified for this text.</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| length | Ein fester oberer Außenabstand in px, em, pt, cm usw. Kann negativ sein. Standard ist 0. | Ausprobieren » |
| % | Ein oberer Außenabstand als Prozentsatz der Breite des umgebenden Blocks. | Ausprobieren » |
| auto | Der Browser berechnet den Wert. Bei einem oberen Außenabstand ergibt dies 0 (anders als bei horizontalem auto, das ein Element zentrieren kann). | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück (0). | Ausprobieren » |
| inherit | Erbt den berechneten Wert vom Elternelement. |
auto ist nur beim Zentrieren mit margin-left/margin-right nützlich. Bei einem oberen Außenabstand hat es keinen Zentrierungseffekt und verhält sich wie 0.
Wann margin-top vs. padding-top verwenden
Verwenden Sie margin-top, um Abstand außerhalb eines Elements zu erzeugen und es von seinen Nachbarn wegzuschieben — und beachten Sie, dass diese Margins mit dem darüber liegenden Element kollabieren können. Verwenden Sie padding-top, wenn Sie Abstand innerhalb der Box benötigen, zwischen dem Rahmen und dem Inhalt; Innenabstand kollabiert nie und ist in jedem sichtbaren background enthalten.
Verwandte Eigenschaften
margin— die Kurzschreibweise, die alle vier Außenabstände auf einmal festlegt.margin-bottom,margin-right,margin-left— die anderen drei Seiten.box-sizing— steuert, wie Breite/Höhe sich zu Innenabstand und Rahmen im Box-Modell verhalten.