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