Stijlmarge Eigenschap _
Voorbeeld
Stel alle vier de marges van een <div>-element in:
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
Definitie en gebruik
De marge-eigenschap stelt de marges van een element in of retourneert deze.
Deze eigenschap kan één tot vier waarden aannemen:
- Eén waarde, zoals: div {marge: 50px} - alle vier de marges zijn 50px
- Twee waarden, zoals: div {marge: 50px 10px} - de boven- en ondermarges zijn 50px, de linker- en rechtermarges zijn 10px
- Drie waarden, zoals: div {marge: 50px 10px 20px}- de bovenmarge is 50px, de linker- en rechtermarge zijn 10px, de ondermarge is 20px
- Vier waarden, zoals: div {marge: 50px 10px 20px 30px} - de bovenmarge is 50px, de rechtermarge is 10px, de ondermarge is 20px, de linkermarge is 30px
Zowel de marge-eigenschap als de padding-eigenschap voegen ruimte in rond een element. Het verschil is echter dat marge de ruimte rond de rand invoegt, terwijl opvulling de ruimte binnen de rand van een element invoegt.
Browserondersteuning
| Property | |||||
|---|---|---|---|---|---|
| margin | Yes | Yes | Yes | Yes | Yes |
Syntaxis
Retourneer de marge-eigenschap:
object.style.margin
Stel de marge-eigenschap in:
object.style.margin = "%|length|auto|initial|inherit"
Eigendomswaarden
| Value | Description |
|---|---|
| % | Defines the margins in % of the width of the parent element |
| length | Defines the margins in length units |
| auto | The browser sets the margins (all four margins will be equal) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technische details
| Standaardwaarde: | 0 |
|---|---|
| Winstwaarde: | Een String, die de marges van een element vertegenwoordigt |
| CSS-versie | CSS1 |
Meer voorbeelden
Voorbeeld
Wijzig alle vier de marges van een <div>-element in "25px":
document.getElementById("myDiv").style.margin = "25px";
Voorbeeld
Retourneer de marges van een <div> element:
alert(document.getElementById("myDiv").style.margin);
Voorbeeld
Verschil tussen de marge-eigenschap en de opvuleigenschap:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-marge
CSS-referentie: marge-eigenschap
❮ Stijlobject