CSS - Eigenschaft margin-bottom
Beispiel
Legen Sie den unteren Rand für ein <p>-Element auf 25 Pixel fest:
p.ex1 {
margin-bottom: 25px;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die margin-bottom
Eigenschaft legt den unteren Rand eines Elements fest.
Hinweis: Negative Werte sind zulässig.
Standardwert: | 0 |
---|---|
Vererbt: | Nein |
Animierbar: | Ja, siehe einzelne Eigenschaften . Lesen Sie mehr über animierbare |
Ausführung: | CSS1 |
JavaScript-Syntax: | Objekt .style.marginBottom="100px" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
margin-bottom | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS-Syntax
margin-bottom: length|auto|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
length | Specifies a fixed bottom margin in px, cm, em, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a bottom margin in percent of the width of the containing element | |
auto | The browser calculates a bottom margin | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Zusammenbruch der Marge
Die oberen und unteren Ränder von Elementen werden manchmal zu einem einzigen Rand zusammengefasst, der dem größten der beiden Ränder entspricht.
Dies passiert nicht an horizontalen (linken und rechten) Rändern! Nur vertikale (obere und untere) Ränder!
Sehen Sie sich das folgende Beispiel an:
Beispiel
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
Im obigen Beispiel hat das Element <p class="a"> einen oberen und unteren Rand von 30 Pixel. Das Element <p class="b"> hat einen oberen und unteren Rand von 20 Pixel.
Das bedeutet, dass der vertikale Abstand zwischen <p class="a"> und <p class="b"> 50 Pixel (30 Pixel + 20 Pixel) betragen sollte. Aber aufgrund des Zusammenbruchs der Margen beträgt die tatsächliche Marge 30 Pixel!
Mehr Beispiele
Beispiel
Legen Sie den unteren Rand für ein <p>-Element auf 10 % der Breite des Containers fest:
p.ex1 {
margin-bottom: 10%;
}
Beispiel
Legen Sie den unteren Rand für ein <p>-Element auf 2 em fest:
p.ex1 {
margin-bottom: 2em;
}
Verwandte Seiten
CSS-Tutorial: CSS-Rand
HTML-DOM-Referenz: marginBottom-Eigenschaft