Почему пустой div смещается при добавлении margin-bottom?

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

Это происходит потому, что визуальный отступ (margin) применяется к внешним границам элемента, независимо от его содержимого. То есть, если задан margin-bottom: 400px, то элемент "отодвинется" от всех элементов под ним на это расстояние.

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

Lynn «Кофеман» ответил на данный вопрос: 
 
Его нижний margin схлопнулся с его верхним margin-ом, а так же верхним margin у body.



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



Вот в этом примере видно что сдвинулся элемент body, а div лежит в этом body.

https://codepen.io/alexeyten/pen/oNOJmbw