Как избежать проблем со схлопыванием внешних отступов при верстке?

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

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

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