CSS margin-bottom eigenschap
Voorbeeld
Stel de ondermarge voor een <p> element in op 25 pixels:
p.ex1 {
margin-bottom: 25px;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De margin-bottom
eigenschap stelt de ondermarge van een element in.
Opmerking: Negatieve waarden zijn toegestaan.
Standaardwaarde: | 0 |
---|---|
geërfd: | Nee |
Animeerbaar: | ja, zie individuele eigenschappen . Lees over animeren |
Versie: | CSS1 |
JavaScript-syntaxis: | object .style.marginBottom="100px" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
margin-bottom | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS-syntaxis
margin-bottom: length|auto|initial|inherit;
Eigendomswaarden
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 |
Marge samenvouwen
De boven- en ondermarges van elementen worden soms samengevouwen tot één enkele marge die gelijk is aan de grootste van de twee marges.
Dit gebeurt niet op horizontale (links en rechts) marges! Alleen verticale (boven en onder) marges!
Kijk naar het volgende voorbeeld:
Voorbeeld
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
In het bovenstaande voorbeeld heeft het element <p class="a"> een boven- en ondermarge van 30px. Het element <p class="b"> heeft een boven- en ondermarge van 20px.
Dit betekent dat de verticale marge tussen <p class="a"> en <p class="b"> 50px (30px + 20px) moet zijn. Maar door het instorten van de marge wordt de werkelijke marge 30px!
Meer voorbeelden
Voorbeeld
Stel de ondermarge voor een <p> element in op 10% van de breedte van de container:
p.ex1 {
margin-bottom: 10%;
}
Voorbeeld
Stel de ondermarge voor een <p> element in op 2 em:
p.ex1 {
margin-bottom: 2em;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-marge
HTML DOM-referentie: marginBottom-eigenschap