поле на элементе h1 внутри div
У меня есть контейнер 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;
}
В чем причина такого поведения?