5

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

Живой пример тут.

2 ответа 2

4

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

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

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

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

4

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.