margin – это атрибут, определяющий пространство (отступы) вокруг элемента, к которому применён.

Существует стандартные значения атрибута margin:
• auto   (по центру)
• top
• left
• right
• bottom

Когда вы указываете некоторые значения (в пикселях) для этого атрибута – их нужно писать так:
margin: 10px 20px 30px (отступ: сверху; слева; снизу)

Так же можно написать :
margin: 50px - и отступы на 50px будут вокруг всего элемента

Помимо этого, отступы можно задавать в процентах: margin: 30% - и отступы на 30% будут вокруг всего элемента

Теперь для закрепления всего выше написанного сделаем несколько примеров.

Сделаем два блока с фиксированными размерами. В этих блоках будут размещены короткие фразы, но у одной значения отступов будут вдвое больше другой. Блокам будет задан атрибут: margin: auto;

<style>
#my_div_1 {
background: #FFCFCF;
border: 1px solid #FF9B9B;
width: 450px;
height: 150px;

margin: auto;
}

p.my_marg_p1 {
font-size: 16px;
color: White;

margin: 20px 40px 20px;
}

p.my_marg_p2 {
font-size: 16px;
color: White;

margin: 50px 80px 50px;
}
</style>

<div id="my_div_1">
<p class="my_marg_p1">Отступ сверху слева снизу</p>

Какой-то текст
</div>

<br>
<br>

<div id="my_div_1">
<p class="my_marg_p2">Большой отступ сверху слева снизу</p>

Какой-то текст
</div>

Теперь сделаем пример, в котором будет большой блок с атрибутом: margin: auto; Внутри этого блока будет другой блок (поменьше), которому будет задан атрибут: margin: 18%; А внутри этого малого блока будет находится третий, самый маленький блок с параметром - margin: 40px;

<style>
#my_div_2 {
background: #C5FFCB;
border: 2px solid #3DFF50;
width: 450px;
height: 400px;

margin: auto;
}

#my_div_3 {
background: #A9F938;
border: 2px solid #1DF8FF;
width: 200px;
height: 200px;

margin: 18%;
}

#my_div_4 {
background: #F8FFAA;
color: #000000;
font-size: 12px;

margin: 40px;
}
</style>

<div id="my_div_2">
 <div id="my_div_3">
  <div id="my_div_4">
    До ближайшей к Солнцу звезды - Альфа Центавра - 4,2 светового года, 
	или примерно 40 триллионов километров.
  </div>
 </div>
</div>