Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про CSS: margin collapsing, css, margin

Как происходит схлопывание вертикальных и горизонтальных margin'ов в CSS?

Вопрос проверяет понимание механизма схлопывания отступов.

Короткий ответ

Схлопывание отступов (margin collapsing) происходит, когда два вертикальных margin'а соседних блоков объединяются в один, равный наибольшему из них. Горизонтальные margin'ы не схлопываются, так как схлопывание затрагивает только вертикальные отступы.

Длинный ответ

В CSS вертикальные margin'ы могут схлопываться, то есть объединяться в один общий отступ. Это происходит, когда два соседних блока имеют вертикальные margin'ы, и вместо их суммирования браузер выбирает больший из двух отступов. Схлопывание также может происходить у пустых блоков, первого и последнего дочерних элементов. 

Горизонтальные margin'ы, напротив, не схлопываются, так как такие отступы обычно не приводят к наложению элементов друг на друга. Например, если один элемент имеет margin-bottom: 20px, а следующий — margin-top: 30px, общий отступ между ними будет 30px, а не 50px.

Уровень

  • Рейтинг:

    1

  • Сложность:

    2

Навыки

  • CSS

    CSS

Ключевые слова

#margin collapsing

#css

#margin

Подпишись на React Developer в телеграм