Style padding property
- Previous page overflowY
- Next page paddingBottom
- Go back to the previous level HTML DOM Style Object
Definitie en gebruik
padding
Deze eigenschap stelt in of retourneert de inbuitschuiving van het element.
Deze eigenschap kan één tot vier waarden aannemen:
margin-eigenschap en Padding-eigenschap Worden allemaal ingevoegd in de ruimte rond het element. Maar het verschil is dat margin ruimte invoegt rond de rand van de rand, terwijl padding ruimte invoegt binnen de rand van het element.
- Een waarde, bijvoorbeeld: div {padding: 50px} - alle vier kanten hebben een inbuitschuiving van 50px
- Twee waarden, bijvoorbeeld: div {padding: 50px 10px} - de boven- en onderinbuitschuiving zijn 50px, de links- en rechterinbuitschuiving zijn 10px
- Drie waarden, bijvoorbeeld: div {padding: 50px 10px 20px} - bovenste binnenmarge is 50px, linker en rechter binnenmarge is 10px, onderste binnenmarge is 20px
- Vier waarden, bijvoorbeeld: div {padding: 50px 10px 20px 30px} - bovenste binnenmarge is 50px, rechter binnenmarge is 10px, onderste binnenmarge is 20px, linker binnenmarge is 30px
Zie ook:
CSS tutorialCSS inner padding
CSS referentiemanualPadding-eigenschap
Voorbeeld
Voorbeeld 1
Stel de binnenmarge van het <div>-element in:
document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
Voorbeeld 2
Verander de binnenmarge van alle vier kanten van het <div>-element naar "25px":
document.getElementById("myDiv").style.padding = "25px";
Voorbeeld 3
Geef de binnenmarge van het <div>-element terug:
alert(document.getElementById("myDiv").style.padding);
Voorbeeld 4
Het verschil tussen de margin- en padding-eigenschappen:
function changeMargin() { document.getElementById("myDiv").style.margin = "100px"; } function changePadding() { document.getElementById("myDiv2").style.padding = "100px"; }
Syntax
Geef de padding-eigenschap terug:
object.style.padding
Stel de padding-eigenschap in:
object.style.padding = "%|length|initial|inherit"
Eigenschapswaarde
Waarde | Beschrijving |
---|---|
% | Definieer de binnenmarge als een percentage van de breedte van het ouder-element. |
length | Definieer de binnenmarge met een lengte-eenheid. |
initial | Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial. |
inherit | Deze eigenschap erft van de ouder-element. Raadpleeg inherit. |
Technische details
Standaardwaarde: | 0 |
---|---|
Terugkeervalue: | een string die de binnenmarge van het element aangeeft. |
CSS versie: | CSS1 |
browser ondersteunt
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Support | Support | Support | Support | Support |
- Previous page overflowY
- Next page paddingBottom
- Go back to the previous level HTML DOM Style Object