Den paddingegenskap i CSS definerer den innerste del av esken modellen gir fri plass rundt et element innhold, på innsiden av eventuelle definerte marger og / eller kanter.
Polstringsverdier er satt med lengder eller prosenter, og kan ikke akseptere negative verdier. Den opprinnelige, eller standardverdien, for alle polstringsegenskapene er 0.
Her er et enkelt eksempel:
.box ( padding: 0 1.5em 0 1.5em; )Eksemplet ovenfor bruker paddingshorthand-egenskapen, som godtar opptil fire verdier, vist her:
.box ( padding: || || || )Hvis det er angitt færre enn fire verdier, antas de manglende verdiene basert på de som er definert. Følgende to regelsett vil for eksempel få identiske resultater:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Dermed, hvis bare en verdi er definert, setter dette alle fire polstringsegenskapene til samme verdi:
.box ( padding: 20px; )Hvis tre verdier blir deklarert, er det det padding: (top) (left-and-right) (bottom);.
Alle de enkelte polstringsegenskapene kan deklareres ved hjelp av langhånd, i så fall vil du bare definere en verdi per eiendom. Så det forrige eksemplet kan skrives om som følger:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Polstring og beregning av elementbredde
Hvis et element har en spesifisert bredde, vil en hvilken som helst polstring som legges til elementet, legge til elementets totale bredde. Dette er ofte et uønsket resultat, da det krever at elementets bredde beregnes på nytt hver gang polstringen justeres. (Merk at dette også skjer med høyde, men i de fleste tilfeller er det foretrukket å ikke gi et element en innstilt høyde.)
For eksempel:
.box ( padding: 20px; width: 400px; )I dette eksemplet, selv om .boxelementet er gitt en eksplisitt bredde på 400 px, vil den faktiske gjengitte bredden på elementet på siden være 440 px. Dette tar ikke bare hensyn til 400px-bredden, men også 20px på venstre polstring og 20px på høyre polstring (definert med polstring i forrige eksempel).
Dette skjer for å opprettholde 400 px innholdsplass, i stedet for 400 px av total elementbredde. Her er en penn som demonstrerer dette:
Dette skjer i alle nettlesere som er i bruk, i standardmodus, men vil ikke forekomme i IE6 og IE7 i quirks-modus (det vil si på sider som vises i IE6 eller IE7 hvor det ikke er erklært noen doktype eller der noe annet skjer for å utløse quirks modus).
For å løse dette problemet, og dermed holde bredden på 400 px, uansett mengde polstring, kan du bruke box-sizingeiendommen:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Dette får elementet til å opprettholde bredden mens den øker polstringen, og dermed redusere tilgjengelig innholdsplass. Her er en demonstrasjon:
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Jepp | Jepp | Jepp | Jepp | Jepp | Jepp | Jepp |