Какое расстояние будет между двумя соседними элементами с margin сверху 100px и снизу 50px в CSS?

Что проверяют

Знаете ли вы про схлопывание вертикальных отступов (margin collapsing) и, главное, его границы. Правильный ответ «100px» дают многие, а дальше идёт вопрос, от которого всё зависит: а если у родителя display: flex?

Как отвечать

У каждого элемента margin-top: 100px и margin-bottom: 50px. Между ними встречаются нижний отступ первого (50px) и верхний отступ второго (100px). В обычном блочном потоке соседние вертикальные отступы не складываются, а схлопываются в больший: расстояние будет 100px, а не 150px.

Дальше покажите, что знаете условия:

• только вертикаль: горизонтальные margin не схлопываются никогда;
• только блочный поток: у flex- и grid-элементов отступы не схлопываются, в display: flex; flex-direction: column расстояние станет 150px. Сегодня расстояние между соседями чаще задают через gap, и вопрос снимается;
• не для всех элементов: inline-block, плавающие (float) и абсолютно позиционированные элементы в схлопывании не участвуют;
• отрицательные значения: если один отступ отрицательный, они складываются. Если оба отрицательные, берётся больший по модулю;
• родитель и ребёнок: верхний отступ первого ребёнка может «выпасть» за родителя, если между ними нет padding, border или нового контекста форматирования. Лечится display: flow-root на родителе.

Проверить можно в DevTools: на панели Computed видны значения, а подсветка элемента показывает, что отступы накладываются друг на друга.

Где спотыкаются

Отвечают 150px, складывая отступы как в обычной арифметике. Это ответ для flex или grid, а не для блоков.

Путают, какие отступы встречаются. Между соседями важен нижний у первого и верхний у второго. Если у верхнего блока задан только margin-top, а у нижнего только margin-bottom, между ними вообще ноль.

Лечат схлопывание через overflow: hidden. Для случая родитель и ребёнок это работает, но обрезает выпадающее содержимое и тени. flow-root делает то же без побочных эффектов.