Style padding property

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";

Probeer het zelf uit

Voorbeeld 2

Verander de binnenmarge van alle vier kanten van het <div>-element naar "25px":

document.getElementById("myDiv").style.padding = "25px";

Probeer het zelf uit

Voorbeeld 3

Geef de binnenmarge van het <div>-element terug:

alert(document.getElementById("myDiv").style.padding);

Probeer het zelf uit

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";
}

Probeer het zelf uit

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