Что такое схлопывание padding

Схлопывание margin (не padding!) — это поведение в CSS, когда вертикальные отступы между соседними блоками объединяются в один, равный наибольшему из них. Padding так не схлопывается.

Пример:

.block1 { margin-bottom: 20px; }
.block2 { margin-top: 30px; }

Между блоками будет не 50px (20+30), а 30px (наибольший margin).

Где не происходит схлопывание:

1. У flex и grid контейнеров
2. У элементов с position: absolute/fixed
3. При наличии border или padding между margin
4. У float элементов

Padding всегда суммируется и никогда не схлопывается с margin или другим padding.