Egenskaben padding
Egenskaben padding indstiller den indre
afstand af et element. Værdien for egenskaben er
enhver enhed
for størrelser. Som standard kan enhver browser
tilføje elementer forskellige afstande.
Egenskaben er en forkortelse for egenskaberne
padding-top,
padding-right,
padding-bottom,
padding-left.
Syntaks
selektor {
padding: værdi;
}
Antal parametre
Egenskaben padding accepterer 1,
2, 3 eller 4 værdier,
opremset med mellemrum:
| Antal | Beskrivelse |
|---|---|
1 |
Én værdi angiver afstand på alle sider af elementet. |
2 |
Første værdi angiver afstand ovenfor og nedenfor, og anden - til højre og venstre. |
3 |
Første værdi angiver afstand ovenfor, anden - til højre og venstre, og tredje - nedenfor. |
4 |
Første værdi angiver afstand ovenfor, anden - til højre, tredje - nedenfor, og fjerde - til venstre. |
Eksempel
I dette tilfælde vil den indre afstand som standard være nul, og teksten vil være presset op til blokkens grænse:
<div id="elem">
some long text
</div>
#elem {
padding: 0;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Eksempel
Og lad os nu lave en indre afstand
på 30px:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Eksempel
Nu vil afstanden ovenfor og nedenfor være 20px,
og til højre og venstre - 5px:
<div id="elem">
some long text
</div>
#elem {
padding: 20px 5px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Eksempel
Nu er afstanden ovenfor 5px, til højre -
15px, nedenfor - 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å
-
egenskaben
margin,
som angiver den ydre afstand