Margin xususiyati

margin xususiyati elementning tashqi chekinishini belgilaydi. Xususiyat qiymati sifatida istalgan o‘lchov birliklari yoki brauzerga element chekinishini mustaqil hisoblash imkoniyatini beruvchi auto kalit so‘zi xizmat qiladi. Standart bo‘yicha har bir brauzer elementlarga turli xil chekinishlar qo‘shishi mumkin.

Xususiyat quyidagi xususiyatlar uchun qisqartma hisoblanadi: margin-top, margin-right, margin-bottom, margin-left.

Sintaksis

selektor {
	margin: qiymat;
}

Qiymatlar soni

margin xususiyati 1, 2, 3 yoki 4 ta qiymatni bo‘shliq bilan ajratib qabul qiladi:

Soni	Tavsif
`1`	Bitta qiymat elementning barcha tomonlariga chekinishni belgilaydi.
`2`	Birinchi qiymat yuqori va pastki chekinishni, ikkinchisi esa - o‘ng va chap chekinishni belgilaydi.
`3`	Birinchi qiymat yuqori chekinishni, ikkinchisi - o‘ng va chap chekinishni, uchinchisi - pastki chekinishni belgilaydi.
`4`	Birinchi qiymat yuqori chekinishni, ikkinchisi - o‘ng, uchinchisi - pastki, to‘rtinchisi - chap chekinishni belgilaydi.

Misol

Endi bizda chekinishsiz blok bo‘ladi:

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

Misol

Endi blokka 10px chekinish belgilaymiz:

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

Misol

Blokka yuqori va pastki tomondan 10px, chap va o‘ng tomondan 20px chekinish belgilaymiz:

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

Misol

Blokka yuqori tomondan 5px, o‘ng tomondan 15px, pastki tomondan 25px va chap tomondan 35px chekinish belgilaymiz:

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

Shuningdek qarang

padding xususiyati,
ichki chekinishni belgilaydi