Детальные элементы с полями внутри DIV

Мне нужно два последовательных div (с фонами), которые можно легко касаться друг друга, один под другим. Однако этот макет ломается, когда я помещаю дочерний элемент p в нижний div. Поля элемента p заставляют пробел между обеими div s. Это странное поведение, так как я ожидаю, что поле p останется в пределах области содержимого и фона div. Он делает то же самое в Firefox, Chrome и IE 8.

<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc"><p>Bottom Div</p></div>

Вот как это выглядит.

Я мог бы исправить это, изменив поля на paddings для элемента p, но тогда я также должен был бы сделать это с элементами заголовка, элементами списка и любым другим элементом, который я хочу использовать в начале div. Это нежелательно.

Может ли кто-нибудь просветить меня: о чем я прошу прощения в коробке? Есть ли простой способ исправить это, желательно, изменив стиль div?

Ответ 1

Это ожидаемое поведение *. Есть несколько способов обойти это. Если вы плаваете divs, они будут содержать поля дочерних элементов и предотвращать крах маржи. Другой подход - добавить границу или дополнение к div.

* Поля div и p "объединяются, чтобы сформировать единый край", даже если они вложены, поскольку они имеют прилегающие поля без прокладки или границы между ними.

Ответ 2

Добавьте overflow: hidden или overflow: auto в div

Ответ 3

Решение 1

Добавьте переполнение: hidden/auto в содержащий div, чтобы предотвратить срыв маржи.

Решение 2

Добавить положительное дополнение к содержащему div и равному отрицательному полю для внутреннего элемента

Новое решение

Добавьте дополнение в 0.01px к содержащему div, это предотвратит развал маржи, но не будет никакого отрицательного поля для внутреннего элемента.

Ответ 4

Установка положительного отступов, и соответствующее отрицательное поле в элементе div, похоже, устраняет проблему, хотя я не знаю почему.

<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc; padding: 1px; margin: -1px"><p>Bottom Div</p></div>