CSS skola
CSS marginaler

CSS marginaler 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="foo">Aenean imperdiet iaculis nulla vitae.</p>
<p class="fue">Aenean imperdiet iaculis nulla vitae.</p>

Marginaler frigör utrymme runt ett element. Marginaler saknar bakgrundsfärg och är helt transparenta. Marginaler kan skrivas i vanliga måttenheter (px, em, cm..) eller i procent (%).

CSS

p {background:red; margin:20px;}
.foo {background:blue; margin:1em;}
.fue {background:orange; margin:10%;}

Mer om marginaler

Olika sidor på ett element kan ha olika marginaler. Det går att ange med egenskaperna "margin-top", "margin-right", "margin-bottom"," margin-left":

CSS

p {background:red; margin-left:100px;}
.foo {background:blue; margin-left:10px;}
.fue {background:orange; margin-left:0px;}

Samlingsegenskap för margin

Det går att ange alla fyra sidor samtidigt med samlingsegenskapen "margin":

CSS

p {background:red; margin:0 0 0 100px;}
.foo {background:blue; margin:10px 0 0 10px;}
.fue {background:orange; margin:0px 100px;}

Värdena anges i tur och ordning för topp, höger, botten och vänster.

Det går även att ange färre egenskaper än fyra.

Antal egenskaper för margin
Antal egenskaper Exempel: Resultat
1 div {margin:10px;} 10px margin på alla fyra sior.
2 div {margin:10px 5px;} 10px margin på ovan- och undersidan,
5px margin på höger- och vänstersidan.
3 div {margin:10px 0 5px;} 10px margin på ovansidan,
0px marin på höger- och vänstersidan,
5px margin på undersidan.
| Mer