Свойство margin

Свойство margin задаёт величину отступа по периметру элемента создающего пространство по его внешней стороне. Отступы можно задать как от каждого края элемента одновременно, так и по отдельности, в зависимости от заданных параметров.
Варианты записей отступов в CSS
margin : auto;
margin : 0px;
margin : 1px 2px;
margin : 0px 6px 4px;
margin : 0px 3px 6px 9px;
auto
– данная опция задаёт автоматический расчёт размеров отступов.
0px
– по всему периметру элемента отступ будет иметь нулевое значение.
1px 2px
– 1px
= верх и низ. 2px
= лево и право.
0px 6px 4px
– 0px
= верх. 6px
= лево и право. 4px
= низ.
0px 3px 6px 9px
– 0px
= верх. 3px
= право. 6px
= низ. 9px
= лево. (По часовой стрелке)
Свойства отступов по всем сторонам
Свойство margin определяет величину отступа по всем сторонам.
margin : 10%;
margin : 20px;
margin : auto;

HTML
<div class="container">
<div class="box">
Отступы по всем сторонам
</div>
</div>
CSS
.container {
display: inline-block;
background-color: #f00;
}
.box {
margin: 20px;
padding: 20px;
border: 4px solid #000;
background-color: #fc0;
}
Свойства отступов по отдельным сторонам
Отступы элемента можно задать по отдельности, благодаря соответствующим свойствам:
Отступ сверху и снизу
margin: 20% 0%;
margin: 20px 0px;
margin: auto 0px;

Отступ слева и справа
margin: 0% 20%;
margin: 0px 20px;
margin: 0px auto;

Верх / лево и право / низ
margin: 0px 10px 20px;
margin: 0% 10% 20%;

Отступы по часовой стрелке
margin : 0px 10px 20px 30px;

Отступ сверху
Свойство margin-top определяет величину отступа по верхнему краю элемента.
margin-top : 10%;
margin-top : 20px;
margin-top : auto;

Отступ слева
Свойство margin-left определяет величину отступа по левому краю элемента.
margin-left : 10%;
margin-left : 20px;
margin-left : auto;

Отступ справа
Свойство margin-right определяет величину отступа по правому краю элемента.
margin-right : 10%;
margin-right : 20px;
margin-right : auto;

Отступ снизу
Свойство margin-bottom определяет величину отступа по нижнему краю элемента.
margin-bottom : 10%;
margin-bottom : 10px;
margin-bottom : auto;
