CSS-поля сворачиваются

Question

Итак, по сути, происходит ли схлопывание полей, когда вы не устанавливаете какие-либо поля, отступы или границы для данного элемента div?

Answer 1

Нет.Если у вас есть два смежных вертикальных поля, используется большее из двух, а другое игнорируется.

Так, например, если у вас есть два элемента блочного отображения, A, за которым следует B под ним, и A имеет нижнее поле 3em, а B имеет верхнее поле 2em, то расстояние между ними будет 3em. .

Если вы установите границу или отступы, это предотвратит свертывание.В приведенном выше примере расстояние между двумя элементами будет 5em.

Если вы не установите никаких полей, то не будет полей, которые можно было бы свернуть.Он не имеет никакого отношения к используемому типу элемента — он применим ко всем типам элементов, а не только <div> элементы.

Читать спецификация CSS 2.1 Больше подробностей.

Answer 2

«выражение «свертывание полей» означает, что смежные поля (без непустого содержимого, полей, границ или зазоров, разделяющих их) двух или более блоков (которые могут быть рядом друг с другом или вложенными) объединяются, образуя одно поле».

Источник: Боксовая модель – 8.3.1 Сворачивание полей