Eigenschap padding

De eigenschap padding stelt de binnenafstand van een element in. De waarde van de eigenschap zijn alle eenheden voor afmetingen. Standaard kan elke browser verschillende afstanden aan elementen toevoegen. De eigenschap is een afkorting voor de eigenschappen padding-top, padding-right, padding-bottom, padding-left.

Syntaxis

cssselector {
  padding: waarde;
}

De eigenschap padding accepteert 1, 2, 3 of 4 waarden, gescheiden door spaties:

Aantal	Beschrijving
`1`	Eén waarde stelt de afstand aan alle kanten van het element in.
`2`	De eerste waarde stelt de afstand boven en onder in, en de tweede - rechts en links.
`3`	De eerste waarde stelt de afstand boven in, de tweede - rechts en links, en de derde - onder.
`4`	De eerste waarde stelt de afstand boven in, de tweede - rechts, de derde - onder, en de vierde - links.

In dit geval is de standaard binnenafstand nul en zal de tekst tegen de rand van het blok gedrukt zijn:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 0;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Laten we nu een binnenafstand van 30px instellen:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Nu is de afstand boven en onder 20px, en rechts en links - 5px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 20px 5px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Nu is de afstand boven 5px, rechts - 15px, onder - 25px, links - 35px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 5px 15px 25px 35px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат: