Padding-ominaisuus

Ominaisuus padding asettaa elementin sisäisen täytön. Ominaisuuden arvona voivat olla minkä tahansa kokoyksiköt. Oletusarvoisesti jokainen selain voi lisätä elementteihin erilaisia täytöitä. Ominaisuus on lyhennys ominaisuuksille padding-top, padding-right, padding-bottom, padding-left.

Syntaksi

valitsija {
	padding: arvo;
}

Parametrien määrä

Ominaisuus padding hyväksyy 1, 2, 3 tai 4 arvoa, lueteltuna välilyönnillä erotettuna:

Määrä	Kuvaus
`1`	Yksi arvo asettaa täytön elementin kaikilta sivuilta.
`2`	Ensimmäinen arvo asettaa täytön ylhäältä ja alhaalta, toinen - oikealta ja vasemmalta.
`3`	Ensimmäinen arvo asettaa täytön ylhäältä, toinen - oikealta ja vasemmalta, kolmas - alhaalta.
`4`	Ensimmäinen arvo asettaa täytön ylhäältä, toinen - oikealta, kolmas - alhaalta, neljäs - vasemmalta.

Esimerkki

Tässä tapauksessa oletusarvoisesti sisäinen täyttö on nolla ja teksti on painettu lohkon reunaan asti:

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

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

Esimerkki

Tehdään nyt sisäinen täyttö 30px:

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

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

Esimerkki

Nyt täyttö ylhäältä ja alhaalta on 20px, ja oikealta ja vasemmalta - 5px:

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

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

Esimerkki

Nyt täyttö ylhäältä 5px, oikealta - 15px, alhaalta - 25px, vasemmalta - 35px:

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

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

Katso myös

ominaisuus margin,
joka asettaa ulkoisen marginaalin