sorry_i_noob
@sorry_i_noob

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

Вот здесь:
htmlbook.ru/blog/skhlopyvayushchiesya-otstupy
Написано:
Этот эффект работает только для блоков, у которых не заданы поля и границы. Для отступов слева и справа схлопывание никогда не применяется.

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

Почему так? Неверная документация, которую я читаю? Или я что-то не так делаю?
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
В указанном Вами источнике конкретно приведенная цитата говорит о выпадении margin внутренних блоков за границу родительских и способ предотвращения этого.

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

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

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы