padding
Siden er opdateret 25. 12. 2011
Med padding defineres afstanden fra et elements indhold til elementets eventuelle border.
div {
padding: 0;
background-color: #ccf;
}
p {
margin: 10px;
padding: 10px;
border: 1px solid #000;
background-color: #fcc;
}
I en <div> med padding nulstillet og med lyseblå background-color har jeg indsat en <p> med margin og padding sat til 10px, lyserød background-color og sort border. Det ses, at border ligger mellem margin og padding.
Eksempel på definition af padding:
td {
padding: 15px;
}
Her sættes padding: 15px. Det giver 15 px padding hele vejen rundt om tabelcellers indhold.
Du kan også sætte padding på en klasse:
.tofemten {
padding: 2px 15px;
}
Her sættes padding: 2px 15px. Det giver 2 px padding i toppen, 15 px padding i højre side, 2 px padding i bunden og 15 px padding i venstre side af et element, der er blevet tildelt klassen .tofemten.
Her er et kodeeksempel, hvor jeg foruden baggrundsfarve og border også har defineret padding
.eksempel {
color: black;
background-color: #eee;
border: 1px solid #999;
padding: 15px;
}
Jeg har lavet en side, hvor jeg demonstrerer hvordan padding øger en defineret bredde på en boks:
