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