Свойство 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. Пример

[html]
<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>
[/html]

1. Код

Код:
<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. Пример

[html]
<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>
[/html]

2. Код

Код:
<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>

[good]