Margin-i omadus
Omadus margin määrab elemendi
välise väljapaneku. Omaduse väärtusteks võivad olla
suvalised mõõtühikud
või võtmeomadus auto,
mis laseb brauseril iseseisvalt arvutada
elemendi väljapanekut. Vaikimisi võib iga brauser
elementidele lisada erinevaid väljapanekuid.
Omadus on lühend omaduste
margin-top,
margin-right,
margin-bottom,
margin-left jaoks.
Süntaks
valija {
margin: väärtus;
}
Väärtuste arv
Omadus margin võtab vastu 1,
2, 3 või 4 väärtust,
loetletud tühikuga eraldatuna:
| Arv | Kirjeldus |
|---|---|
1 |
Üks väärtus määrab väljapaneku elemendi kõikidelt külgedelt. |
2 |
Esimene väärtus määrab väljapaneku ülevalt ja alt, teine - paremalt ja vasakult. |
3 |
Esimene väärtus määrab väljapaneku ülevalt, teine - paremalt ja vasakult, kolmas - alt. |
4 |
Esimene väärtus määrab väljapaneku ülevalt, teine - paremalt, kolmas - alt, neljas - vasakult. |
Näide
Praegu on meil plokk ilma väljapanekuta:
<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;
}
:
Näide
Ja nüüd määrame plokile väljapaneku 10px:
<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;
}
:
Näide
Määrame plokile väljapaneku 10px ülevalt
ja alt ning 20px - vasakult ja paremalt:
<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;
}
:
Näide
Määrame plokile väljapaneku 5px ülevalt,
15px paremalt, 25px alt ja 35px
vasakult:
<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;
}
:
Vaata ka
-
omadus
padding,
mis määrab sisemise väljapaneku