Уласцівасць 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,
якое задае ўнутраны адступ