маржа по элементу h1 внутри DIV

Question

У меня есть DIV контейнер, который имеет h1 элемент внутри него:

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

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

Правила стиля для DIV и заголовок следующим образом:

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

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

Answer 1

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

Answer 2

Ваша проблема заключается в том, что поля в CSS будут разваливаться на eachother.

Read this awesome article explaining the concept, резюме управления:

Проще говоря, это определение указывает на то, что, когда вертикальные края двух элементов соприкасаются, только край элемента с наибольшим значением разницы будут выполнены, в то время как маржа элемента с меньшим значением поля будет свернута до нуля.

В вашем случае, в частности, можно прочитать в разделе «Сворачивание Поля между родительскими и элементы детского» несколько страниц вниз. В вашем случае following CSS 2.1 rule не применяются:

Верхний край блока элемента в потоке падает с верхним краем своего первым в потоке блочного уровня ребенка, если элемент не имеет верхнюю границы, нет верхнего отступа , и у ребенка нет разрешения.

Answer 3

Ну, решение заключается в добавлении свойства overflow: hidden; в элемент заголовка.
Here JsFiddle.