CSS -opvulling Eigenschap
Voorbeeld
Stel de opvulling voor alle vier de zijden van een <p>-element in op 35 pixels:
p {
padding: 35px;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De opvulling van een element is de ruimte tussen de inhoud en de rand.
De paddingeigenschap is een steno-eigenschap voor:
Opmerking: opvulling creëert extra ruimte binnen een element, terwijl marge extra ruimte rond een element creëert.
Deze eigenschap kan één tot vier waarden hebben.
Als de eigenschap padding vier waarden heeft:
- opvulling:10px 5px 15px 20px;
- bovenste vulling is 10px
- rechter vulling is 5px
- onderste opvulling is 15px
- linker opvulling is 20px
Als de eigenschap padding drie waarden heeft:
- opvulling:10px 5px 15px;
- bovenste vulling is 10px
- rechter en linker opvulling zijn 5px
- onderste opvulling is 15px
Als de eigenschap padding twee waarden heeft:
- opvulling: 10px 5px;
- bovenste en onderste opvulling zijn 10px
- rechter en linker opvulling zijn 5px
Als de eigenschap padding één waarde heeft:
- opvulling: 10px;
- alle vier de opvullingen zijn 10px
Opmerking: Negatieve waarden zijn niet toegestaan.
| Standaardwaarde: | 0 |
|---|---|
| geërfd: | Nee |
| Animeerbaar: | ja, zie individuele eigenschappen . Lees over animeren |
| Versie: | CSS1 |
| JavaScript-syntaxis: | object .style.padding="100px 20px" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS-syntaxis
padding: length|initial|inherit;
Eigendomswaarden
| Value | Description | Play it |
|---|---|---|
| length | Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units | |
| % | Specifies the padding in percent of the width of the containing element | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelden
Voorbeeld
Stel de opvulling voor een <p> element in op 35 pixels voor boven en onder, en op 70 pixels voor rechts en links:
p {
padding: 35px 70px;
}
Voorbeeld
Stel de opvulling voor een <p>-element in op 35 pixels voor de bovenkant, 70 pixels voor rechts en links en op 50 pixels voor de onderkant:
p {
padding: 35px 70px 50px;
}
Voorbeeld
Stel de opvulling voor een <p>-element in op 35 pixels voor boven, 70 pixels voor rechts, 50 pixels voor onder en op 90 pixels voor links:
p {
padding: 35px 70px 50px 90px;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-opvulling
CSS-zelfstudie: CSS-boxmodel
HTML DOM-referentie: eigenschap opvulling