Den paddingejendom i CSS definerer den inderste del af boksen model, hvilket skaber plads omkring et element indhold, indersiden af eventuelle definerede margener og / eller grænser.
Polstringsværdier indstilles ved hjælp af længder eller procenter og kan ikke acceptere negative værdier. Den oprindelige eller standardværdien for alle polstringsegenskaber er 0.
Her er et simpelt eksempel:
.box ( padding: 0 1.5em 0 1.5em; )Eksemplet ovenfor bruger paddingshorthand-egenskaben, som accepterer op til fire værdier, vist her:
.box ( padding: || || || )Hvis der er indstillet færre end fire værdier, antages de manglende værdier baseret på de definerede værdier. Følgende to regelsæt får for eksempel identiske resultater:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Således, hvis kun en værdi er defineret, indstiller dette alle fire polstringsegenskaber til den samme værdi:
.box ( padding: 20px; )Hvis der erklæres tre værdier, er det padding: (top) (left-and-right) (bottom);.
Enhver af de individuelle polstringsegenskaber kan deklareres ved hjælp af langhånd, i hvilket tilfælde du kun definerer en værdi pr. Ejendom. Så det foregående eksempel kunne omskrives som følger:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Polstring og beregning af elementbredde
Hvis et element har en specificeret bredde, tilføjes enhver polstring, der føjes til elementet, elementets samlede bredde. Dette er ofte et uønsket resultat, da det kræver, at elementets bredde genberegnes hver gang polstringen justeres. (Bemærk, at dette også sker med højden, men i de fleste tilfælde foretrækkes det ikke at give et element en indstillet højde.)
For eksempel:
.box ( padding: 20px; width: 400px; )I dette eksempel, selvom .boxelementet får en eksplicit bredde på 400 px, vil den faktiske gengivne bredde på elementet på siden være 440 px. Dette tager ikke kun højde for 400px bredde, men også 20px af venstre polstring og 20px af højre polstring (defineret med polstring stenografi i det foregående eksempel).
Dette sker for at opretholde 400 pixel indholdsplads snarere end 400 pixel af den samlede elementbredde. Her er en pen, der demonstrerer dette:
Dette sker i alle browsere, der er i brug, i standardtilstand, men vil ikke forekomme i IE6 og IE7 i quirks-tilstand (dvs. på sider, der vises i IE6 eller IE7, hvor der ikke er angivet nogen doktype, eller hvor der sker noget andet for at udløse quirks mode).
For at løse dette problem og dermed holde bredden på 400 px, uanset mængden af polstring, kan du bruge box-sizingejendommen:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Dette får elementet til at opretholde sin bredde, mens polstringen øges, hvilket reducerer det tilgængelige indholdsrum. Her er en demonstration:
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | Ja | Ja | Ja |