Свертывание полей CSS
Ответы 2
"the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin."
Нет. Если у вас есть два смежных вертикальных поля, используется большее из двух, а другое игнорируется.
Так, например, если у вас есть два элемента блочного отображения, A, за которым следует B под ним, и A имеет нижнее поле 3em, а B имеет верхнее поле 2em, тогда расстояние между ними будет 3em. .
Если вы установите границу или отступ, это предотвратит сворачивание. В приведенном выше примере расстояние между двумя элементами будет 5em.
Если вы не установите поля, они не будут разрушаться. Он не имеет никакого отношения к используемому типу элемента - он применим ко всем типам элементов, а не только к элементам <div>.
Прочтите спецификация CSS 2.1 для более подробной информации.
3. "Если вы не устанавливаете ..." обычно верно для DIV, но сжимание полей БУДЕТ влиять на большинство элементов по умолчанию.
+1 - хороший ответ. Кроме того, сворачивание полей не происходит, когда элементы перемещаются, абсолютно позиционированы или встроены в блок. Более подробная информация: reference.sitepoint.com/css/collapsingmargins
@ steve.hanson ... или иметь overflow: hidden
это верно только в том случае, если они следуют друг за другом, но не верно, если у вас есть элемент блока с полем 2em внутри элемента, у которого нет поля (0em), тогда поле внутреннего элемента блока все равно будет 0em . Так что это не всегда будет большим из двух. Пример: jsfiddle.net/56maenuL
Проголосует за ответ с учетом нескольких изменений: 1. В примере «3em / 2em» вы можете вместо этого использовать абсолютные единицы; в этом случае 2em / может / быть больше, чем 3em 2. «Если вы установите границу или отступ ...» - это верно только в определенных случаях, а не в стандартном «A, за которым следует B».