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 қасиеті,
ол ішкі шек белгілейді