Некоторые особенности схлопывания отступов в CSS, которые важно учитывать при разработке сайтов:
- Схлопывание работает только с вертикальными отступами (margin-top, margin-bottom). habr.com www.hackfrontend.com
- Ширина общего отступа равна ширине большего из исходных. html5book.ru Если среди схлопывающихся отступов есть отрицательные значения, то браузер добавит отрицательное значение к положительному, а полученный результат и будет расстоянием между элементами. html5book.ru
- Схлопывание не работает в некоторых случаях, например с «плавающими» блоками, корневыми элементами, абсолютно позиционируемыми элементами и строчными элементами. habr.com html5book.ru
- Чтобы избежать схлопывания, можно использовать отступ либо только снизу у первого элемента, либо только сверху у второго. skillbox.ru
- Схлопывание может вызывать неожиданные визуальные эффекты, поэтому при разработке важно контролировать поведение отступов, например с помощью свойств padding или overflow. www.hackfrontend.com
Схлопывание отступов в CSS — это нормальное поведение, но оно может стать неожиданным, если не учитывать контекст. www.hackfrontend.com