Utfyllnad

Utfyllnad ger luft och mellanrum mellan innehÃ¥llet och elementets yttre gräns. Utan utfyllnad ser texten ut att ha det lite ”trÃ¥ngt” och ligger kanske lite för nära en eventuell kantlinje.

Utfyllnad på boxens alla sidor anges med egenskapen padding i enheten pixlar (px). Precis som med kantlinjer kan du beskriva en speciell sida av elementet genom att skriva padding-top, padding-right, padding-bottom eller padding-left.

p   { width:500px; height:200px; border:1px solid black; padding:10px }
h1  { border:1px solid #ccc; padding-top:10px; padding-bottom:5px }

Om en exakt bredd eller höjd på ett element ska räknas ut, måste man räkna med alla egenskaperna som utökar bredd och höjd. I exemplet ovan blir styckeelementets totala bredd 500px (bredd) + 20px (utfyllnad båda sidor) + 2px (kantlinjer båda sidor).

Att räkna ut exakta mått brukar till exempel vara aktuellt när man arbetar med sidlayout och vill passa ihop olika element med pixelprecision.

OBS! I Internet Explorer 6 läggs utfyllnaden innanför elementgränsen och en eventuell kantlinje. Det betyder att elementets bredd inte påverkas av utfyllnaden som den egentligen ska göra.

Vill du slippa skriva så mycket när du ska ha olika utfyllnad på alla sidor, kan du också använda kortformen till padding. Till det sätter man fyra värden efter varandra och alltid i turordningen top right bottom left.

p {margin:2em 0.5em 1em 0.3em}