Stoppning - CSS-tricks | CSS Almanack 2025

Den paddingegenskap i CSS definierar den innersta delen av lådan modell, vilket skapar utrymme runt ett element innehåll, insidan av några definierade marginaler och / eller gränser.

Vadderingsvärden ställs in med längder eller procentsatser och kan inte acceptera negativa värden. Det ursprungliga eller standardvärdet för alla utfyllnadsegenskaper är 0.

Här är ett enkelt exempel:

.box ( padding: 0 1.5em 0 1.5em; )

Exemplet ovan använder paddingshorthand-egenskapen, som accepterar upp till fyra värden, som visas här:

.box ( padding: || || || )

Om färre än fyra värden är inställda antas de saknade värdena baserat på de som har definierats. Följande två regeluppsättningar skulle till exempel få identiska resultat:

.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )

Således, om bara ett värde definieras, ställer detta in alla fyra utfyllnadsegenskaper till samma värde:

.box ( padding: 20px; )

Om tre värden deklareras är det padding: (top) (left-and-right) (bottom);.

Vilken som helst av de enskilda utfyllnadsegenskaperna kan deklareras med långhand, i vilket fall du bara definierar ett värde per egendom. Så det föregående exemplet kan skrivas om enligt följande:

.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )

Vaddering och beräkning av elementbredd

Om ett element har en specificerad bredd, läggs vaddering som läggs till det elementet till elementets totala bredd. Detta är ofta ett oönskat resultat, eftersom det kräver att ett elements bredd beräknas om varje gång stoppningen justeras. (Observera att detta också händer med höjd, men i de flesta fall föredras att inte ge ett element en inställd höjd.)

Till exempel:

.box ( padding: 20px; width: 400px; )

I det här exemplet, även om .boxelementet ges en tydlig bredd på 400 pixlar, kommer den faktiska återgivna bredden på elementet att vara 440 pixlar. Detta tar inte bara hänsyn till 400px-bredden, utan också 20px för vänster padding och 20px för höger padding (definierad med padding-stenografi i föregående exempel).

Detta händer för att behålla 400px innehållsutrymme snarare än 400px av total elementbredd. Här är en penna som visar detta:

Kolla in den här pennan!

Detta inträffar i alla webbläsare som används, i standardläge, men kommer inte att inträffa i IE6 och IE7 i quirks-läge (det vill säga på sidor som visas i IE6 eller IE7 där det inte förklaras någon doktyp eller där något annat händer för att utlösa quirks läge).

För att lösa problemet och därmed hålla bredden på 400 pixlar oavsett mängden stoppning kan du använda box-sizingegenskapen:

.box ( padding: 20px; width: 400px; box-sizing: border-box; )

Detta gör att elementet bibehåller sin bredd samtidigt som utfyllnaden ökar, vilket minskar det tillgängliga innehållsutrymmet. Här är en demonstration: