Почему установка верхней части этого дочернего элемента толкает его родительский контейнер вниз с ним? ⇐ Html

[Anonymous]

У меня есть два div: < /p>



Simple and Cost Effective Web Solutions




Developed by a dedicated team


< /code>

Оба имеют 100% ширину и высоты 800px. Первый заголовок я установил верхнюю маргина: 160px. Вместо того, чтобы перемещать заголовок ниже в его родительский Div, он снимает родительский Div вниз вместе с ним, как вы можете видеть на этой картинке:






h1{
font-size: 48px;
font-family: $header-font-stack;
font-weight: 100;
width: 400px;
}

#headercontainer{
width: 100%;
height: 800px;
background-image: image-url("background.jpg");
background-position: center top;
background-repeat: no-repeat;
}

#headercontainer h1{
text-align: center;
margin: 0px auto;
margin-top: 160px;
color: #610B21;
}
< /code>

Использование прокладки работает очевидно, но я хотел бы быть более правильным и использовать маржу. Как установить верхний край и переместить заголовок ниже в контейнер, не перемещая контейнер с ним?

Подробнее здесь: https://stackoverflow.com/questions/237 ... -container