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}