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