Veturia margin

Veturia margin vendos hapësirën e jashtme të elementit. Vlerat e veturisë mund të jenë çdo njësi për përmasa ose veturia kyçe auto, që i lejon shfletuesit të llogarisë në mënyrë të pavarur hapësirën e elementit. Si parazgjedhje, çdo shfletues mund t'i shtojë elementeve hapësira të ndryshme.

Veturia është një shkurtim për veturitë margin-top, margin-right, margin-bottom, margin-left.

Sintaksa

përzgjedhësi {
	margin: vlera;
}

Numri i vlerave

Veturia margin pranon 1, 2, 3 ose 4 vlera, të listuara ndërmjet hapësirave:

Numri	Përshkrimi
`1`	Një vlerë vendos hapësirë nga të gjitha anët e elementit.
`2`	Vlera e parë vendos hapësirën nga lart dhe poshtë, ndërsa e dyta - nga djathta dhe majta.
`3`	Vlera e parë vendos hapësirën nga lart, e dyta - nga djathta dhe majta, ndërsa e treta - nga poshtë.
`4`	Vlera e parë vendos hapësirën nga lart, e dyta - nga djathta, e treta - nga poshtë, ndërsa e katërta - nga majta.

Shembull

Tani do të kemi një bllok pa hapësira:

<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;
}

Shembull

Tani bllokut do t'i caktojmë një hapësirë prej 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;
}

Shembull

Le t'i caktojmë bllokut një hapësirë prej 10px nga lart dhe poshtë dhe 20px - nga majta dhe djathta:

<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;
}

Shembull

Le t'i caktojmë bllokut një hapësirë prej 5px nga lart, 15px nga djathta, 25px nga poshtë dhe 35px nga majta:

<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;
}

Shihni gjithashtu

veturia padding,
që cakton hapësirën e brendshme