De paddingeigenschap in CSS definieert het binnenste gedeelte van het boxmodel, waardoor ruimte wordt gecreëerd rond de inhoud van een element, binnen gedefinieerde marges en / of randen.
Opvulwaarden worden ingesteld met lengtes of percentages en kunnen geen negatieve waarden accepteren. De begin- of standaardwaarde voor alle opvullingseigenschappen is 0.
Hier is een eenvoudig voorbeeld:
.box ( padding: 0 1.5em 0 1.5em; )In het bovenstaande voorbeeld wordt de paddingsteno-eigenschap gebruikt, die maximaal vier waarden accepteert, die hier worden weergegeven:
.box ( padding: || || || )Als er minder dan vier waarden zijn ingesteld, wordt aangenomen dat de ontbrekende waarden zijn gebaseerd op de waarden die zijn gedefinieerd. De volgende twee regelsets zouden bijvoorbeeld identieke resultaten opleveren:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Als er dus maar één waarde is gedefinieerd, worden alle vier de opvullingseigenschappen op dezelfde waarde ingesteld:
.box ( padding: 20px; )Als er drie waarden worden gedeclareerd, is dat het geval padding: (top) (left-and-right) (bottom);.
Elk van de individuele opvullingseigenschappen kan met de hand worden gedeclareerd, in welk geval u slechts één waarde per eigenschap zou definiëren. Dus het vorige voorbeeld zou als volgt kunnen worden herschreven:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Berekeningen van opvulling en elementbreedte
Als een element een gespecificeerde breedte heeft, zal elke opvulling die aan dat element wordt toegevoegd, bijdragen aan de totale breedte van het element. Dit is vaak een ongewenst resultaat, omdat het vereist dat de breedte van een element opnieuw wordt berekend telkens wanneer de opvulling wordt aangepast. (Merk op dat dit ook gebeurt met hoogte, maar in de meeste gevallen heeft het de voorkeur om een element geen vaste hoogte te geven.)
Bijvoorbeeld:
.box ( padding: 20px; width: 400px; )In dit voorbeeld, hoewel het .boxelement een expliciete breedte van 400px heeft gekregen, is de feitelijk weergegeven breedte van het element op de pagina 440px. Hierbij wordt niet alleen rekening gehouden met de breedte van 400px, maar ook met de 20px linker opvulling en de 20px rechter opvulling (gedefinieerd met opvulling in het vorige voorbeeld).
Dit gebeurt om 400px aan inhoudsruimte te behouden, in plaats van 400px van de totale elementbreedte. Hier is een pen die dit laat zien:
Dit gebeurt in alle in gebruik zijnde browsers, in de standaardmodus, maar zal niet voorkomen in IE6 en IE7 in de eigenaardighedenmodus (dat wil zeggen, op pagina's die worden weergegeven in IE6 of IE7 waar geen doctype is aangegeven of waar iets anders gebeurt om eigenaardigheden te activeren modus).
Om dit probleem op te lossen en de breedte op 400px te houden, ongeacht de hoeveelheid opvulling, kunt u de box-sizingeigenschap gebruiken:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Hierdoor behoudt het element zijn breedte terwijl de opvulling wordt vergroot, waardoor de beschikbare inhoudsruimte wordt verkleind. Hier is een demonstratie:
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | Ja | Ja | Ja |