Die margin eienskap
Die eienskap margin stel die eksterne
spasie van 'n element. Die waarde van die eienskap is enige
eenhede
vir groottes of die sleutelwoordeienskap auto,
wat die leser toelaat om self die spasie van die element te bereken.
Standaard kan elke leser verskillende spasies by elemente voeg.
Die eienskap is 'n afkorting vir die eienskappe
margin-top,
margin-right,
margin-bottom,
margin-left.
Sintaksis
selekteerder {
margin: waarde;
}
Aantal waardes
Die eienskap margin aanvaar 1,
2, 3 of 4 waardes,
gelys deur 'n spasie:
| Aantal | Beskrywing |
|---|---|
1 |
Een waarde stel spasie van alle kante van die element. |
2 |
Eerste waarde stel spasie bo en onder, en die tweede - regs en links. |
3 |
Eerste waarde stel spasie bo, tweede - regs en links, en die derde - onder. |
4 |
Eerste waarde stel spasie bo, tweede - regs, derde - onder, en die vierde - links. |
Voorbeeld
Nou sal ons 'n blok sonder spasies hê:
<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;
}
:
Voorbeeld
En nou stel ons 'n spasie van 10px vir die blok:
<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;
}
:
Voorbeeld
Laat ons vir die blok 'n spasie van 10px bo
en onder en 20px - links en regs stel:
<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;
}
:
Voorbeeld
Laat ons vir die blok 'n spasie van 5px bo,
15px regs, 25px onder en 35px
links stel:
<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;
}
:
Sien ook
-
die eienskap
padding,
wat die interne spasie stel