Почему верхние и нижние внешние отступы пустого блока не схлопываются?

Question

[borisblade95]

Согласно статье "Схлопывание внешних отступов" (https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...), если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), height или min-height для отделения margin-top верхнего отступа этого блока от его margin-bottom нижнего отступа, то верхние и нижние внешние отступы пустого блока схлопываются.
Тогда почему в данном случае не присходит схлопываение внешних границ пустого блока div, у которого margin-top: 300px и margin-bottom: 300px?

Comments

[Ankhena]

С чем они тут должны схлопнуться? Соседей ведь нет.
Тут они могут только выпасть.
И скорее всего это делают.
Для проверки можно задать тень для body

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

Ankhena, они успешно схлопываются между собой
просто браузер показывает неправильно

[Ankhena]

Lynn «Кофеман», это выпадение, а не схлопывание.

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

Ankhena, https://developer.mozilla.org/en-US/docs/Web/CSS/C...

Вот же

Empty blocks
If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

[Ankhena]

Lynn «Кофеман», https://codepen.io/AnnaSummer/pen/poBqQoN
Для body задана тень, чтобы было видно где находится.
Также видно, что отступы div выпали за пределы body.

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

Ankhena, что не отменяет схлопывания маржинов у div

Но на самом деле, автора вопроса просто вводит в заблуждение неправильная отрисовка маржинов в dev tools. Dev tools отрисовывает по 300px сверху и снизу, хотя на самом деле снизу никакого margin нет.

[Ankhena]

Lynn «Кофеман», в этом смысле да, вниз фантомный отступ.

Answer 1

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

Потому что подсветка в браузере показывает неправильно.

Всё правильно схлопывается.

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

Answer 2

[Владимир Римидалв]

Привет) Твой див схлопнут, margin это внешний отступ, а не внутренний (и даже не высота блока), то есть у тебя идет див посередине, а 300 вверх и 300 вниз это уже не див

Comments

[borisblade95]

Привет) Это все и так понятно. Вопрос был о том, почему 300 сверху и 300 снизу, когда, согласно правилам, должно быть просто 300.

[Soer44]

borisblade95, согласно каким правилам?
У тебя чёткая инструкция написана margin-top: 300px; и margin-bottom: 300px;

Answer 3

[Soer44]

Див то пустой. А марджины есть. Это как раздвижение области)))

Comments

[borisblade95]

Это да, но это не ответ на вопрос ))

Answer 4

[Сергей delphinpro]

Под схлопыванием подразумевается наложение внешних отступов двух соседних блоков.

Comments

[borisblade95]

Но все же я понял, что имеются ввиду отступы именно самого блока, а не соседних:

Empty blocks
If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

Говорится, что его отступы схлопываются. Про соседние, родительские и дочерние блоки речь идет в Adjacent siblings и No content separating parent and descendants. К чему тогда вообще пункт про пустые блоки?