Stijl opvulling Eigenschap
Voorbeeld
Stel de opvulling van een <div>-element in:
document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
Definitie en gebruik
Met de eigenschap padding wordt de padding van een element ingesteld of geretourneerd.
Deze eigenschap kan één tot vier waarden aannemen:
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.
- Eén waarde, zoals: div {padding: 50px} - alle vier zijden hebben een opvulling van 50px
- Twee waarden, zoals: div {padding: 50px 10px} - de bovenste en onderste opvulling zijn 50px, de linker- en rechteropvulling zijn 10px
- Drie waarden, zoals: div {padding: 50px 10px 20px} - de bovenste opvulling is 50px, de linker- en rechteropvulling is 10px, de onderste opvulling is 20px
- Vier waarden, zoals: div {padding: 50px 10px 20px 30px} - de bovenste opvulling is 50px, de rechteropvulling is 10px, de onderste opvulling is 20px, de linkeropvulling is 30px
Browserondersteuning
Property | |||||
---|---|---|---|---|---|
padding | Yes | Yes | Yes | Yes | Yes |
Syntaxis
Retourneer de eigenschap padding:
object.style.padding
Stel de eigenschap padding in:
object.style.padding = "%|length|initial|inherit"
Eigendomswaarden
Value | Description |
---|---|
% | Defines the padding in % of the width of the parent element |
length | Defines the padding in length units |
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 tekenreeks, die de opvulling van een element voorstelt |
CSS-versie | CSS1 |
Meer voorbeelden
Voorbeeld
Wijzig de opvulling van alle vier de zijden van een <div>-element in "25px":
document.getElementById("myDiv").style.padding = "25px";
Voorbeeld
Retourneer de opvulling van een <div> -element:
alert(document.getElementById("myDiv").style.padding);
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-opvulling
CSS-referentie: eigenschap opvulling
❮ Stijlobject