Egenskapen padding

Egenskapen padding sätter elementets inre utfyllnad. Värdet på egenskapen är vilka enheter för storlekar som helst. Som standard kan varje webbläsare lägga till olika utfyllnader för element. Egenskapen är en förkortning för egenskaperna padding-top, padding-right, padding-bottom, padding-left.

Syntax

selektor {
	padding: värde;
}

Egenskapen padding accepterar 1, 2, 3 eller 4 värden, uppräknade med mellanslag:

Antal	Beskrivning
`1`	Ett värde sätter utfyllnad på alla sidor av elementet.
`2`	Första värdet sätter utfyllnad upptill och nedtill, och det andra - till höger och vänster.
`3`	Första värdet sätter utfyllnad upptill, andra - till höger och vänster, och det tredje - nedtill.
`4`	Första värdet sätter utfyllnad upptill, andra - till höger, tredje - nedtill, och det fjärde - till vänster.

I detta fall kommer den inre utfyllnaden som standard att vara noll och texten kommer att tryckas mot blockets gräns:

<div id="elem">
	some long text
</div>

#elem {
	padding: 0;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Och nu låt oss göra en inre utfyllnad på 30px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 30px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Nu kommer utfyllnaden upptill och nedtill att vara 20px, och till höger och vänster - 5px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 20px 5px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Nu är utfyllnaden upptill 5px, till höger - 15px, nedtill - 25px, till vänster - 35px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 5px 15px 25px 35px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}