CSS- marge Eigenschap
Voorbeeld
Stel de marge voor alle vier de zijden van een <p>-element in op 35 pixels:
p {
margin: 35px;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De margineigenschap stelt de marges voor een element in en is een verkorte eigenschap voor de volgende eigenschappen:
Als de marge-eigenschap vier waarden heeft:
- marge: 10px 5px 15px 20px;
- bovenmarge is 10px
- rechtermarge is 5px
- ondermarge is 15px
- linkermarge is 20px
Als de marge-eigenschap drie waarden heeft:
- marge: 10px 5px 15px;
- bovenmarge is 10px
- rechter- en linkermarges zijn 5px
- ondermarge is 15px
Als de marge-eigenschap twee waarden heeft:
- marge: 10px 5px;
- boven- en ondermarges zijn 10px
- rechter- en linkermarges zijn 5px
Als de marge-eigenschap één waarde heeft:
- marge: 10px;
- alle vier de marges zijn 10px
Opmerking: Negatieve waarden zijn toegestaan.
| Standaardwaarde: | 0 |
|---|---|
| geërfd: | Nee |
| Animeerbaar: | ja, zie individuele eigenschappen . Lees over animeren |
| Versie: | CSS1 |
| JavaScript-syntaxis: | object .style.margin="100px 50px" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS-syntaxis
margin: length|auto|initial|inherit;
Eigendomswaarden
| Value | Description | Play it |
|---|---|---|
| length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
| % | Specifies a margin in percent of the width of the containing element | |
| auto | The browser calculates a 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 marge voor een <p> element in op 35 pixels voor boven en onder, en op 70 pixels voor rechts en links:
p {
margin: 35px 70px;
}
Voorbeeld
Stel de marge voor een <p> element in op 35 pixels voor boven, 70 pixels voor rechts en links en op 50 pixels voor onder:
p {
margin: 35px 70px 50px;
}
Voorbeeld
Stel de marge voor een <p> element in op 35 pixels voor boven, 70 pixels voor rechts, 50 pixels voor onder en op 90 pixels voor links:
p {
margin: 35px 70px 50px 90px;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-marge
CSS-zelfstudie: CSS-boxmodel
HTML DOM-referentie: marge-eigenschap