CSS-Eigenschaft margin-bottom
Die Eigenschaft margin-bottom dient dazu, den Außenabstand am unteren Rand eines Elements festzulegen.
INFO
Negative Werte sind gültig.
INFO
Wenn nicht ersetzte Inline-Elemente (wie <tt> oder <span>) verwendet werden, hat die CSS-Eigenschaft margin-bottom keine Auswirkung.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Der untere Außenabstand des Elements ist animierbar. |
| Version | CSS2 |
| DOM-Syntax | object.style.marginBottom = "70px"; |
Syntax
Syntax der CSS-Eigenschaft margin-bottom
margin-bottom: length | auto | initial | inherit;Beispiel für die margin-bottom-Eigenschaft:
Beispiel für die CSS-Eigenschaft margin-bottom mit px-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.bottom {
margin-bottom: 100px;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="bottom">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>Ergebnis
Beispiel für die margin-bottom-Eigenschaft mit dem Wert "4em":
Beispiel für die CSS-Eigenschaft margin-bottom mit em-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.bottom {
margin-bottom: 4em;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="bottom">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 für die margin-bottom-Eigenschaft mit den Werten "px", "em" und "%":
Beispiel für die CSS-Eigenschaft margin-bottom mit px-, em- und %-Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.p1 {
margin-bottom: 5em;
}
p.p2 {
margin-bottom: 20%;
}
p.p3 {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>A paragraph with no margins specified.</p>
<p class="p1">Bottom margin is set to 5em.</p>
<p class="p2">Bottom margin is set to 20%.</p>
<p class="p3">Bottom margin is set to 20px.</p>
<p>A paragraph with no margins specified.</p>
</body>
</html>Außenabstand-Kollaps
In einigen Fällen können der obere und der untere Außenabstand zu einem einzigen Außenabstand zusammenfallen, der dem größeren der beiden Werte entspricht. Dies tritt nur bei vertikalen Außenabständen (oben und unten) auf.
Außenabstand-Kollaps
p.one {
margin: 20px 0;
}
p.two {
margin: 35px 0;
}Im obigen Codebeispiel hat das Element <p class="one"> einen vertikalen Außenabstand von 20px. Das Element <p class="two"> hat einen vertikalen Außenabstand von 35px. Man könnte meinen, der vertikale Abstand zwischen diesen beiden Elementen müsse 55px betragen. Aufgrund des Außenabstand-Kollapses beträgt der tatsächliche Abstand jedoch nur 35px.
Beispiel für einen Außenabstand-Kollaps:
Beispiel für den Außenabstand-Kollaps
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.one {
margin: 20px 0;
}
p.two {
margin: 35px 0;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="two">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>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| auto | Legt den unteren Außenabstand fest. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| length | Definiert einen unteren Außenabstand in px, pt, cm usw. Standardwert ist 0. | Ausführen » |
| % | Legt den unteren Außenabstand in % des Elternelements fest. | Ausführen » |
| initial | Legt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt die Eigenschaft von ihrem Elternelement. |
Praxis
Welche Funktion hat die Eigenschaft 'margin-bottom' in CSS?