Чтобы избежать проблем со схлопыванием внешних отступов при вёрстке, можно воспользоваться следующими рекомендациями:

• Позиционировать элементы так, чтобы соседние их стороны имели только один отступ. 1 Например, использовать только верхние отступы для объектов или только нижние. 1
• Задавать элементам только нижний отступ (margin-bottom). 2 В этом случае у элемента будет нижний отступ, которым он примыкает к следующему элементу без верхнего отступа. 2
• Обнулять верхние отступы (margin-top: 0) и нижний отступ (margin-bottom) у последнего дочернего элемента. 2
• Вместо внешних отступов использовать границы (border) аналогичного размера. 3 Цвет границ должен совпадать с цветом фона родителя для создания эффекта прозрачного пространства. 3
• Заменять внешние отступы внутренними (свойство padding). 13 Однако нужно учитывать, что на внутренние отступы распространяется заливка заднего фона объекта, а также значение padding влияет на перерасчёт высоты блока. 1
• Использовать свойство overflow. 1 Схлопывание будет устранено, если значение свойства будет не visible, а какое-нибудь другое. 1 При этом необходимым условием для работы метода является наличие фиксированного размера ширины или высоты объекта. 1

Выбор решения зависит от конкретного случая вёрстки.