|
 |
|
Offentliggjort 2002 - Opdateret n/a
CSS lektion 12
Box-oriented model - Margin
Følgende egenskaber for margin beskrives i denne lektion:
- Margin-top
- Margin-right
- Margin-bottom
- Margin-left
- Sammenskrivning
Margin-top
Angivelse af margin-top.
body {
margin-top: 50px;
}
Margin-right
Angivelse af margin-right.
body {
margin-right: 25px;
}
Margin-bottom
Angivelse af margin-bottom.
body {
margin-bottom: 20px;
}
Margin-left
Angivelse af margin-left.
body {
margin-left: 25px;
}
Sammenskrivning til margin
Det er mulig at sammenskrive margin. Rækkefølgen er:
margin-top | margin-right | margin-bottom | margin-left
Altså med ur, startende med angivelse af top margin!
body {
margin: 50px 25px 20px 25px;
}
I stedet for at angive værdierne i px, kan du også bruge pt, em eller andre værdier.
Margin er ikke kun forbehold 'body', du kan angive margin på f.eks. overskrifter (h1, h2 ..).
Eller du kan definere margin for dine tekstafsnit, som nedenfor stående eksempel viser.
body {
margin: 50px 25px 20px 25px;
}
p {
margin: 20px 25px 20px 25px;
}
h1 {
margin-top: 20px;
}
Andre regler
Hvis der kun angives en værdi, vil den gælde for alle sider (top, right, bottom, left).
Hvis der angives to eller tre værdier, vil den manglende værdi tages fra den modsatte side.
body { margin: 2em }
/* alle margin sættes til 2em */
body { margin: 1em 2em }
/* top og bottom = 1em, right og left = 2em */
body { margin: 1em 2em 3em }
/* top=1em, right=2em, bottom=3em, left=2em */
Næste lektion handler om padding.
PADDING >>
|
