Почему дочерний DIV стягивает вниз за собой родительский DIV если прописать margin-top к дочернему div?

Question

[Petr_FR]

<div class="box">
        <div class="text">
            <h1>Остались вопросы?</h1>
            <p class="default_text">Пишите нам, мы Вам поможем</p>
        </div>

    </div>

.box {
    background-color: gray;
    width: 800px;
    height: 800px;
    margin: 0 auto;
    padding-top: 50px;
}
.text {
    background-color: violet;
    text-align: center;
    width: 500px;
    height: 500px;
    border: 2px solid;
}
h1,p {
    margin: 0px;
}

Comments

[Сергей delphinpro]

Такова спецификация.
Подробности гуглить по теме "схлопывание и выпадение марджинов"

Answer 1

[Сергей]

Срабатывает "схлопывание"
тык сюда