Вопросы React Frontend Developer

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

Вертикальные margin у блочных элементов могут схлопываться.
Если два вертикальных margin соприкасаются, браузер не суммирует их, а берет максимальный.
Это поведение называется margin collapsing.
Горизонтальные margin не схлопываются.

При передаче четырёх значений в margin каждое значение отвечает за свою сторону элемента. Значения применяются по часовой стрелке. Это позволяет задать разные внешние отступы для каждой стороны. Такой синтаксис сокращает код и повышает читаемость. Он используется повсеместно в вёрстке.

Значения margin интерпретируются по часовой стрелке. Сначала задаётся верхний отступ, затем правый, потом нижний и левый. Этот порядок является стандартом CSS. Он используется и в других свойствах, например padding. Знание порядка помогает избежать ошибок в layout.

Margin collapsing — это схлопывание вертикальных отступов у блочных элементов. Оно происходит только для вертикальных margin. Горизонтальные margin не схлопываются. Схлопывание зависит от структуры DOM и контекста элементов. Это часто становится источником багов в вёрстке.