Почему margin схлопываются при том, что я задал поля / границы?

Question

[sorry_i_noob]

Вот здесь:
htmlbook.ru/blog/skhlopyvayushchiesya-otstupy
Написано:

Этот эффект работает только для блоков, у которых не заданы поля и границы. Для отступов слева и справа схлопывание никогда не применяется.

Я задал границы (border), и схлопывание все равно работает:
https://jsfiddle.net/260xcns8/
Я также задал поля (padding), и схлопывание все равно работает:
https://jsfiddle.net/8scoydbn/

Почему так? Неверная документация, которую я читаю? Или я что-то не так делаю?

Comments

[Rustam Bainazarov]

Просто вы неверно понимаете этот механизм. Статья правильная.

Answer 1

[Рома Зварич]

В указанном Вами источнике конкретно приведенная цитата говорит о выпадении margin внутренних блоков за границу родительских и способ предотвращения этого.

Неверная документация, которую я читаю?

Документация верная

Или я что-то не так делаю?

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

Хорошей практикой является задавать margin только в одну сторону (например, вниз).
Также избежать схлопывания соседних по вертикали блоков можно, задав для родителя display: flex;. Схлопывание не происходит во Flex-контейнерах.

Чтобы больше узнать, можете почитать мой перевод статьи про Margin от Рейчел Эндрю

Comments

[Rustam Bainazarov]

Хорошие статьи и дополнение с flow-root.