У меня есть контейнер div, в котором есть элемент h1:

<div id="header">
 <h1>Enlighten Designs</h1>
</div>

Я применил маржинальная вершина, маржинальная левая и маржинальная правая часть к элементу заголовка Однако поле margin-top не применяется к блоку элемента заголовка относительно содержащего элемента div. Вместо этого верхнее поле применяется к содержащему div. Левое и правое поля заголовка применяются к блоку элемента заголовка относительно содержащего элемента div.

Правила стиля для div и header следующие:

#header {
    background: blue;
    height: 150px;
}
h1{
    background: orange;
    margin-top:30px;
    margin-left: 10px;
    margin-right: 10px;
}

В чем причина такого поведения?