Margin хусусияти

margin хусусияти элементнинг ташги мартасини белгилайди. Хусусиятнинг қиймати сифатида ⁅a href="/uzc/markup/manual/css/reference/units/sizes/"⁆ўлчовлар учун бирликлар⁅/a⁆ ёки браузерга элемент мартасини мустақил ҳисоблаш имконини берадиган auto калит сўзи хизмат қилади. Ступи бошида ҳар бир браузер элементларга турли марталарни қўшиши мумкин.

Хусусият quyidagi хусусиятлар учун қисқартма хисобланади: margin-top, margin-right, margin-bottom, margin-left.

Синтаксис

селектор {
	margin: қиймат;
}

Қийматлар сони

margin хусусияти 1, 2, 3 ёки 4 та қийматни, бўшлиқ билан ажратиб кўрсатилади:

Сон	Тасниф
`1`	Битта қиймат элементнинг ҳамма томонидан мартасни белгилайди.
`2`	Биринчи қиймат юқори ва қуйи мартасни белгилайди, иккинчиси - ўнг ва чап тарафдаги мартасни.
`3`	Биринчи қиймат юқори мартасни белгилайди, иккинчиси - ўнг ва чап тарафдаги мартасни, учинчиси - қуйи мартасни.
`4`	Биринчи қиймат юқори мартасни белгилайди, иккинчиси - ўнг, учинчиси - қуйи, тўртинчиси - чап тарафдаги мартасни.

Мисол

Ҳозирда бизда мартассиз блок бўлади:

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

Мисол

Энди блокка 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;
}

Мисол

Блокка 10px юқори ва қуйи ва 20px - чап ва ўнг тарафда мартас белгилаймиз:

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

Мисол

Блокка 5px юқори, 15px ўнг, 25px қуйи ва 35px чап тарафда мартас белгилаймиз:

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

Шунингдек қаранг

padding хусусияти,
у ички мартасни белгилайди