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

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

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

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

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

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

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

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

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

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

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

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

Похожие вопросы
Лига Роботов Новосибирск
от 65 000 до 85 000 ₽
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
Love.ru Пермь
от 100 000 ₽