Как предотвратить схлопывание margin при вложении элементов?

Несколько способов предотвратить схлопывание margin при вложении элементов:

• Задать элементам только нижний отступ (margin-bottom). htmlacademy.ru Поток вывода элементов на страницу всегда идёт сверху вниз, поэтому логично выставлять отступы по его направлению. htmlacademy.ru В этом случае у элемента будет нижний отступ, которым он примыкает к следующему элементу без верхнего отступа. htmlacademy.ru
• Добавить padding или border родительскому элементу. skyeng.ru habr.com Например, можно установить padding: 1px родителю или border: 1px solid transparent. skyeng.ru Это отключит эффект схлопывания. habr.com
• Использовать gap вместо margin. skyeng.ru Например, при работе с карточками товаров рекомендуется применять gap вместо margin внутри grid или flex-контейнеров. skyeng.ru Это полностью исключает проблему схлопывания. skyeng.ru
• Использовать свойство display: grid или display: flex. htmlacademy.ru Если у родительского элемента указано одно из этих свойств, то отступы дочерних элементов не схлопнутся. htmlacademy.ru
• Использовать абсолютное позиционирование. vaden-pro.ru В этом случае за объектом не будет закреплено место в структуре страницы. vaden-pro.ru Схлопывание не происходит, когда блок обладает свойствами плавающего объекта. vaden-pro.ru