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 касиети,
ал ички чекти белгилейт