Egenskapen margin
Egenskapen margin sätter den externa
marginalen för ett element. Värdet på egenskapen kan vara
någon enhet
för storlekar eller nyckelordet auto,
som låter webbläsaren själv beräkna
elementets marginal. Som standard kan
varje webbläsare
lägga till olika marginaler till element.
Egenskapen är en genväg för egenskaperna
margin-top,
margin-right,
margin-bottom,
margin-left.
Syntax
selektor {
margin: värde;
}
Antal värden
Egenskapen margin accepterar 1,
2, 3 eller 4 värden,
uppräknade med mellanslag:
| Antal | Beskrivning |
|---|---|
1 |
Ett värde sätter marginal på alla sidor av elementet. |
2 |
Första värdet sätter marginal upptill och nedtill, och det andra - till höger och vänster. |
3 |
Första värdet sätter marginal upptill, andra - till höger och vänster, och det tredje - nedtill. |
4 |
Första värdet sätter marginal upptill, andra - till höger, tredje - nedtill, och det fjärde - till vänster. |
Exempel
Nu ska vi ha ett block utan marginaler:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 0;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
Exempel
Och nu sätter vi marginal på 10px för blocket:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 10px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
Exempel
Vi sätter marginal på 10px upptill
och nedtill och 20px - till vänster och höger:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 10px 20px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
Exempel
Vi sätter marginal på 5px upptill,
15px till höger, 25px nedtill och 35px
till vänster:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 5px 15px 25px 35px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
Se även
-
egenskapen
padding,
som sätter den inre marginalen