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
selector {
padding: waarde;
}
Aantal parameters
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. |
Voorbeeld
In dit geval is de standaard binnenafstand nul en zal de tekst tegen de rand van het blok gedrukt zijn:
<div id="elem">
some long text
</div>
#elem {
padding: 0;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Voorbeeld
Laten we nu een binnenafstand
van 30px instellen:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Voorbeeld
Nu is de afstand boven en onder 20px,
en rechts en links - 5px:
<div id="elem">
some long text
</div>
#elem {
padding: 20px 5px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Voorbeeld
Nu is de afstand boven 5px, rechts -
15px, onder - 25px, links -
35px:
<div id="elem">
some long text
</div>
#elem {
padding: 5px 15px 25px 35px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Zie ook
-
de eigenschap
margin,
die de buitenafstand instelt