Margin xassəsi

margin xassəsi elementin xarici boşluğunu təyin edir. Xassənin dəyəri kimi istənilən ölçü vahidləri ya da brauzerə elementin boşluğunu müstəqil hesablamağa imkan verən auto açar sözü ola bilər. Standart olaraq hər brauzer elementlərə müxtəlif boşluqlar əlavə edə bilər.

Bu xassə aşağıdakı xassələr üçün qısadır: margin-top, margin-right, margin-bottom, margin-left.

Sintaksis

selektor {
	margin: deyer;
}

Dəyərlərin sayı

margin xassəsi 1, 2, 3 ya da 4 dəyər qəbul edir, boşluqla ayrılan:

Say	Təsvir
`1`	Bir dəyər elementin bütün tərəflərindən boşluq təyin edir.
`2`	Birinci dəyər yuxarı və aşağıdan boşluq təyin edir, ikinci isə sağ və soldan.
`3`	Birinci dəyər yuxarıdan boşluq təyin edir, ikinci - sağ və soldan, üçüncü isə aşağıdan.
`4`	Birinci dəyər yuxarıdan boşluq təyin edir, ikinci - sağdan, üçüncü - aşağıdan, dördüncü isə soldan.

Nümunə

İndi bizim boşluqsuz bir blokumuz olacaq:

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

Nümunə

İndi bloka 10px boşluq təyin edək:

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

Nümunə

Bloka yuxarı və aşağıdan 10px, sol və sağdan isə 20px boşluq təyin edək:

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

Nümunə

Bloka yuxarıdan 5px, sağdan 15px, aşağıdan 25px və soldan 35px boşluq təyin edək:

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

Həmçinin bax

padding xassəsi,
daxili boşluq təyin edir