Egenskapen padding

Egenskapen padding setter den indre avstanden til et element. Verdien til egenskapen kan være enhver enhet for størrelser. Som standard kan hver nettleser legge til forskjellige avstander for elementer. Egenskapen er en forkortelse for egenskapene padding-top, padding-right, padding-bottom, padding-left.

Syntaks

velger {
	padding: verdi;
}

Antall parametere

Egenskapen padding aksepterer 1, 2, 3 eller 4 verdier, listet opp med mellomrom:

Antall	Beskrivelse
`1`	Én verdi setter avstand på alle sider av elementet.
`2`	Første verdi setter avstand på toppen og bunnen, og den andre - til høyre og venstre.
`3`	Første verdi setter avstand på toppen, andre - til høyre og venstre, og den tredje - på bunnen.
`4`	Første verdi setter avstand på toppen, andre - til høyre, tredje - på bunnen, og den fjerde - til venstre.

Eksempel

I dette tilfellet vil den indre avstanden som standard være null og teksten vil være presset mot kanten av blokken:

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

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

Eksempel

La oss nå lage en indre avstand på 30px:

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

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

Eksempel

Nå vil avstanden på toppen og bunnen være 20px, og til høyre og venstre - 5px:

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

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

Eksempel

Nå er avstanden på toppen 5px, til høyre - 15px, på bunnen - 25px, til venstre - 35px:

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

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

Se også

egenskapen margin,
som setter den ytre avstanden