Margin հատկությունը

margin հատկությունը սահմանում է տարրի արտաքին բացը: Հատկության արժեքը կարող է լինել ցանկացած չափի միավոր կամ auto հիմնաբառը, որը թույլ է տալիս բրաուզերին ինքնուրույն հաշվարկել տարրի բացը: Լռելյայնորեն, յուրաքանչյուր բրաուզեր կարող է տարրերին ավելացնել տարբեր բացեր:

Հատկությունը հանդիսանում է հետևյալ հատկությունների համառոտագրություն. 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 հատկությունը,
որը սահմանում է ներքին բաց