CSS margin, примеры. Как сделать внешний отступ в html

Свойство CSS margin отвечает за задание внешних отступов элемента от других объектов.

Синтаксис CSS margin

margin: top right bottom left;

Где:

top - отступ сверху от других элементов;
right - отступ справа от других элементов;
bottom - отступ снизу от других элементов;
left - отступ слева от других элементов;

Значения чаще всего задаются в пикселях. Допускается также задание в виде процентов и других допустимых единицах CSS.

Примечание 1

Допускается задание не четырех значений. В зависимости от количества значений действия будут разные:

Если задано 3 значения, то первое значение устанавливает отступ сверху, второе — одновременно слева и справа, а третье — снизу
Если задано 2 значения, то первое значение устанавливает отступ сверху и снизу, второе — слева и справа от содержимого
Если задано 1 значение, то отступ задается одинаковый отступ для всех сторон. Например:

margin: 7px 7px 7px 7px;
Можно задать компактнее:
margin: 7px;

Примечание 2

В отличии от свойства CSS padding, margin допускает отрицательные значения.

Также у margin есть 4 отдельных свойства CSS. Каждое из них отвечает за какое-то направление.

margin-left - отступ от левой границы элемента;
margin-right - отступ от правой границы элемента;
margin-top - отступ от верхней границы элемента;
margin-bottom - отступ от левой границы элемента;

Например

margin: 3px 5px 7px 10px;
Или можно задать подробно:
margin-left: 10px;
margin-right: 5px;
margin-top: 3px;
margin-bottom: 7px;

Свойство CSS margin используется практически постоянно. Отступы играют важнейшую роль в оформлении html страницы. Приведем примеры

Примеры с разными отступами от других элементов

Пример 1. Положительные отступы внутри тега <div>

<html>
<head>
<style>
	.block1{
	width: 250px;
	height: 250px;
	border: 1px dotted #000;
	background: #228B22;
	}
	.margin1{
	width: 100px;
	height: 100px;
	border: 2px dotted #000;
	margin: 10px 0px 0px 40px;
	background: #7FFF00;
	}
</style>
</head>
<body>
	<div class="block1">
		<div class="margin1"></div>
	</div> 
</body>
</html>

Вот как это выглядит на странице:

Пример 2. Отрицательные отступы внутри тега <div>

<html>
<head>
<style>
	.block1{
	width: 250px;
	height: 250px;
	border: 1px dotted #000;
	background: #228B22;
	}
	.margin1{
	width: 100px;
	height: 100px;
	border: 2px dotted #000;
	margin: -20px 0px 0px 40px;
	background: #7FFF00;
	}
</style>
</head>
<body>
	<div class="block1">
		<div class="margin1"></div>
	</div> 
</body>
</html>

Вот как это выглядит на странице:

Для обращения к margin из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.margin="VALUE"

← Перейти в каталог CSS уроков