Margin īpašība

margin īpašība nosaka elementa ārējo atkāpi. Īpašības vērtība var būt jebkuras mērvienības izmēriem vai atslēgas vārds auto, kas ļauj pārlūkprogrammai patstāvīgi aprēķināt elementa atkāpi. Pēc noklusējuma katra pārlūkprogramma var pievienot elementiem dažādas atkāpes.

Īpašība ir saīsinājums šīm īpašībām: margin-top, margin-right, margin-bottom, margin-left.

Sintakse

selektors {
	margin: vērtība;
}

Vērtību skaits

margin īpašība pieņem 1, 2, 3 vai 4 vērtības, uzskaitītas ar atstarpēm:

Skaits	Apraksts
`1`	Viena vērtība nosaka atkāpi no visām elementa pusēm.
`2`	Pirmā vērtība nosaka atkāpi no augšas un apakšas, un otrā - no labās un kreisās puses.
`3`	Pirmā vērtība nosaka atkāpi no augšas, otrā - no labās un kreisās puses, un trešā - no apakšas.
`4`	Pirmā vērtība nosaka atkāpi no augšas, otrā - no labās puses, trešā - no apakšas, un ceturtā - no kreisās puses.

Piemērs

Tagad mums būs bloks bez atkāpēm:

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

Piemērs

Tagad blokam iestatīsim atkāpi 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;
}

Piemērs

Iestatīsim blokam atkāpi 10px no augšas un apakšas un 20px - no kreisās un labās puses:

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

Piemērs

Iestatīsim blokam atkāpi 5px no augšas, 15px no labās puses, 25px no apakšas un 35px no kreisās puses:

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

Skatiet arī

īpašība padding,
kas nosaka iekšējo atkāpi