CSS padding eigenschap
- vorige pagina overscroll-behavior-y
- Volgende pagina padding-block
Definitie en gebruik
De padding-afgekorte eigenschap stelt alle binnenste marge-eigenschappen in in één verklaring.
Uitleg
Deze afgekorte eigenschap stelt de breedte van alle binnenste marges van het element in, of de breedte van de marges aan elke kant in. De binnenste marge van een inline niet-vervangend element beïnvloedt niet de berekening van de lijnhoog; daarom kan een element zowel binnenste marge als achtergrond hebben en visueel uitstrekken naar andere regels, mogelijk nog steeds over andere inhoud overlappen. De achtergrond van het element strekt zich uit door de binnenste marge. Negatieve waarde van de marges is niet toegestaan.
Opmerking:Negatieve waarden zijn niet toegestaan.
Voorbeeld 1
padding:10px 5px 15px 20px;
- De bovenste binnenste marge is 10px
- De rechter binnenste marge is 5px
- De onderste binnenste marge is 15px
- De linker binnenste marge is 20px
Voorbeeld 2
padding:10px 5px 15px;
- De bovenste binnenste marge is 10px
- De rechter binnenste marge en de linker binnenste marge zijn 5px
- De onderste binnenste marge is 15px
Voorbeeld 3
padding:10px 5px;
- De bovenste binnenste marge en de onderste binnenste marge zijn 10px
- De rechter binnenste marge en de linker binnenste marge zijn 5px
Voorbeeld 4
padding:10px;
- Alle 4 binnenste marges zijn 10px
Zie ook:
CSS tutorial:CSS binnenafstand
HTML DOM referentiehandleiding:padding-eigenschap
Voorbeeld
Stel de 4 binnenste marges van het p-element in:
p
{
padding:2cm 4cm 3cm 4cm;
}
CSS syntaxis
padding: length|initial|inherit;
Eigenschapswaarde
| Waarde | Beschrijving |
|---|---|
| auto | De browser berekent de binnenste marge. |
| length | Stelt een marge in een specifieke eenheid in, zoals pixels, centimeters, enz. De standaardwaarde is 0px. |
| % | Stelt een marge in procenten van de breedte van het ouder_element. |
| inherit | Stelt dat de binnenste marge van het ouder_element moet worden geërfd. |
Technische details
| Standaardwaarde: | 0 |
|---|---|
| Inheritance: | nee |
| Versie: | CSS1 |
| JavaScript syntaxis: | object.style.padding="10px 5px" |
TIY voorbeeld
- Alle binnenste marges in één verklaring
- Dit voorbeeld toont aan hoe alle binnenste marges in één verklaring worden ingesteld met behulp van de afgekorte eigenschap, wat één tot vier waarden kan zijn.
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- vorige pagina overscroll-behavior-y
- Volgende pagina padding-block
