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:

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - padding
sidens top
Brugere lige nu: 1
Home Mail