HOME -> CSS_TUTORIAL -> css-12 Tirsdag, 22. august 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
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 >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top