Savybė margin
Savybė margin nustato išorinį
elemento atstumą. Savybės reikšmėmis gali būti
bet kokios dydžio vienetų
vienetai arba rakto savybė auto,
leidžianti naršyklei savarankiškai skaičiuoti
elemento atstumą. Pagal nutylėjimą kiekviena naršyklė gali
pridėti elementams įvairių atstumų.
Savybė yra sutrumpinimas savybėms
margin-top,
margin-right,
margin-bottom,
margin-left.
Sintaksė
selektorius {
margin: reikšmė;
}
Reikšmių kiekis
Savybė margin priima 1,
2, 3 arba 4 reikšmes,
išvardytas per tarpą:
| Kiekis | Aprašas |
|---|---|
1 |
Viena reikšmė nustato atstumą iš visų elementų pusių. |
2 |
Pirmoji reikšmė nustato atstumą iš viršaus ir apačios, o antroji - iš dešinės ir kairės. |
3 |
Pirmoji reikšmė nustato atstumą iš viršaus, antroji - iš dešinės ir kairės, o trečioji - iš apačios. |
4 |
Pirmoji reikšmė nustato atstumą iš viršaus, antroji - iš dešinės, trečioji - iš apačios, o ketvirtoji - iš kairės. |
Pavyzdys
Dabar mes turėsime bloką be atstumų:
<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;
}
:
Pavyzdys
O dabar blokui nustatysime atstumą 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;
}
:
Pavyzdys
Nustatykime blokui atstumą 10px iš viršaus
ir apačios ir 20px - iš kairės ir dešinės:
<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;
}
:
Pavyzdys
Nustatykime blokui atstumą 5px iš viršaus,
15px iš dešinės, 25px iš apačios ir 35px
iš kairės:
<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;
}
:
Taip pat žiūrėkite
-
savybė
padding,
kuri nustato vidinį atstumą
