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

Добрый день. Подскажите, почему margin-top сдвигает элемент относительно body, а не родительского блока? Живой пример тут

Ответ

@metamorfoza, почитайте вот эту статью: "Схлопывающиеся отступы". После прочтения все должно встать на свои места. Несмотря на загадочность, схлопывание несёт в себе сугубо практическое значение и в первую очередь предназначено для корректного отображения текста. Расстояние между абзацами (тег

) без схлопывания увеличится в два раза, тогда как верхний отступ первого абзаца и нижний отступ последнего абзаца останутся неизменными. Схлопывание гарантирует, что расстояние в абзацах везде будет одинаковым. Чтобы избежать такого поведения, назначьте родительскому блоку свойство overflow: auto Вот ваш исправленный пример