Когда я добавляю маржу к вложенному DIV, это заставляет родительский DIV вместо этого получать маржу, если я не предоставлю родительскому DIV границу. Зачем?

Question

Кто-нибудь еще сталкивался с этим?Это второй раз, когда это происходит за столько лет, и я не уверен, что «правильный» способ решить его.,

Тестирование в Safari / FF.

Answer 1

Это называется margin-collapse.Когда верхнее и нижнее поле непосредственно соприкасаются (не разделены ничем, например границей или разрывом строки), поля сжимаются в одно поле.Это не ошибка.Подробнее об этом можно прочитать здесь: SitePoint .

Answer 2

Обычно я решаю эту проблему, устанавливая display: inline-block на внешнем div.Он сделает внешний div так, чтобы занимать ровно пространство, необходимое для отображения его содержимого.

Пример , показывающий разницу.

Answer 3

Звучит как падение полей, что является естественным поведением. Это хорошее чтение:

http://www.andybudd.com/archives/2003/11/no_margin_for_error/

Есть несколько способов обойти проблемы, связанные с коллапсом маржи. Одним из способов является добавление границы или 1px отступа вокруг элементов, чтобы границы больше не касались и не дольше развал.

Еще один способ остановить сворачивание полей - изменить свойство position Элемент. Спецификации CSS2 объясняют, что поля абсолютно и относительно позиционированных блоков не разрушайся Также, если вы плаваете в поле, поля больше не рушатся. Это не всегда целесообразно изменить свойства позиции элемента, но в некоторых ситуациях, если у вас проблемы с нежелательным обвалом маржи, это может быть вариант.