Почему пустой div смещается, если ему задать margin-bottom?

Question

[borisblade95]

Столкнулся с ситуацией, которая сбила меня с толку: имеется пустой div на пустой странице. Единственное указанное свойство для div - margin-bottom: 400px. Почему div сместился ровно на 400px вниз. Разве нижний отступ не должен быть прижат к верху? Ведь высота у div равна 0.

Comments

[Lynn «Кофеман»]

Вангую что как-то неочевидно сработало схлопывание отступов (margin collapse) https://developer.mozilla.org/en-US/docs/Web/CSS/C...

[Ankhena]

Причем, с участием body.
Если div перестанет быть пустым, то всё починится.

[borisblade95]

Lynn «Кофеман», Ankhena, если бы там был указан margin-top, тогда было бы логично: https://html5book.ru/css-blochnaya-model/

2.2. Выпадение вертикальных отступов
Если внутри одного блока расположить другой блок и задать ему margin-top, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху, т.е. внутренний блок «выпадет» из родительского блока.

Хотя тогда бы подсвечиваемая область (margin-top) была бы сверху. Но там указан margin-bottom, что делает абсолютно непонятным смещение вниз.
Кстати, вот аналогичный вопрос на Stack Overflow, который так и не получил развернутого ответа: https://stackoverflow.com/questions/35887579/why-d.... Все говорят про схлопывание, но при этом никто не может объяснить, почему margin-bottom имеет эффект margin-top. В данной статье ничего об этом не говорится: https://developer.mozilla.org/en-US/docs/Web/CSS/C....

[Lynn «Кофеман»]

borisblade95, нулевой margin сверху (а он по умолчанию нулевой) точно так же отлично схлопывается

А подсветка dev tools просто глючит в этом случае

[borisblade95]

Lynn «Кофеман», но ведь вопрос не о схлопывании и не о подсветке, а о том, почему сам div смещен вниз на 400px, тогда как он должен быть расположен в самом верху.

[Lynn «Кофеман»]

borisblade95, нет.
Его нижний margin схлопнулся с его верхним margin-ом, а так же верхним margin у body.

Да, получается немного контр-интуитивно что позиция элемента может быть оказаться ниже чем его нижний margin, но такое поведение придумали больше 20 лет назад и тогда никого не волновало где на самом деле будет невидимый элемент.

Вот в этом примере видно что сдвинулся элемент body, а div лежит в этом body.
https://codepen.io/alexeyten/pen/oNOJmbw

[borisblade95]

Lynn «Кофеман»,

Его нижний margin схлопнулся с его верхним margin-ом, а так же верхним margin у body.

Вот теперь все стало ясно! Большое спасибо, что уделили время и помогли разобраться в вопросах ))

Answer 1

[borisblade95]

Lynn «Кофеман» ответил на данный вопрос:

Его нижний margin схлопнулся с его верхним margin-ом, а так же верхним margin у body.

Да, получается немного контр-интуитивно что позиция элемента может быть оказаться ниже чем его нижний margin, но такое поведение придумали больше 20 лет назад и тогда никого не волновало где на самом деле будет невидимый элемент.

Вот в этом примере видно что сдвинулся элемент body, а div лежит в этом body.
https://codepen.io/alexeyten/pen/oNOJmbw