Задать вопрос
sorry_i_noob
@sorry_i_noob

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

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

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

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

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

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

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

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

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

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

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

Похожие вопросы