Какие существуют методы предотвращения схлопывания внешних отступов между блоками?

Некоторые методы предотвращения схлопывания внешних отступов между блоками:

• Использование только одного отступа. vaden-pro.ru Можно позиционировать элементы так, чтобы соседние их стороны имели только один отступ. vaden-pro.ru Например, использовать только верхние отступы или только нижние. vaden-pro.ru Однако такой подход негибкий. mpbox.ru
• Установка внутреннего отступа для нужной стороны родителя. vaden-pro.ru Также можно использовать границу (border), которую можно сделать прозрачной или такой же по цвету, как и сам контейнер. vaden-pro.ru Из-за внутренних отступов чётко фиксированная высота изменится. vaden-pro.ru
• Использование свойства overflow. vaden-pro.ru Схлопывание будет устранено, если значение свойства будет не visible, а какое-нибудь другое. vaden-pro.ru Для работы метода необходим фиксированный размер ширины или высоты объекта. vaden-pro.ru При использовании свойства overflow контент может прокручиваться или обрезаться. vaden-pro.ru
• Замена внешних отступов границами. vaden-pro.ru Для этого нужно определить цвет границы, идентичный фону блока. vaden-pro.ru Такой способ не сработает, если для объекта уже были указаны границы, а также при наличии полицветного фона. vaden-pro.ru
• Использование свойства padding. vaden-pro.ru Можно заменять позиционирование внешними отступами на расположение через внутренние — свойство padding. vaden-pro.ru Однако значение padding влияет на перерасчёт высоты блока. vaden-pro.ru
• Абсолютное позиционирование. vaden-pro.ru В этом случае за объектом не будет закреплено место в структуре страницы. vaden-pro.ru Схлопывание не происходит, когда блок обладает свойствами плавающего объекта. vaden-pro.ru Однако блок может выпадать из общей структуры. vaden-pro.ru
• Применение display: flex или grid к контейнеру. skyeng.ru Также для работы с карточками товаров рекомендуется использовать gap вместо margin внутри grid или flex-контейнеров — это полностью исключает проблему схлопывания. skyeng.ru