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

#html #css

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

Ответы

Ответ 1

@metamorfoza, почитайте вот эту статью: "Схлопывающиеся отступы".
После прочтения все должно встать на свои места.

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

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

Вот ваш исправленный пример.


Ответ 2

Выпадение верхнего марджина за пределы родителя хорошо лечится созданием в родителе
блока высотой 0 пикселей, который был бы его первым дочерним элементом (размещался
в самом начале).

Удобней всего этого добиться с помощью псевдоэлемента before:


#parent::before {
    content: "";
    overflow: hidden; // обязательно!
    display: block;
)