Мне нужно два последовательных 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?
Это ожидаемое поведение *. Есть несколько способов обойти это. Если вы плаваете divs, они будут содержать поля дочерних элементов и предотвращать крах маржи. Другой подход - добавить границу или дополнение к div.
* Поля div и p "объединяются, чтобы сформировать единый край", даже если они вложены, поскольку они имеют прилегающие поля без прокладки или границы между ними.
Добавьте overflow: hidden или overflow: auto в div
Решение 1
Добавьте переполнение: hidden/auto в содержащий div, чтобы предотвратить срыв маржи.
Решение 2
Добавить положительное дополнение к содержащему div и равному отрицательному полю для внутреннего элемента
Новое решение
Добавьте дополнение в 0.01px к содержащему div, это предотвратит развал маржи, но не будет никакого отрицательного поля для внутреннего элемента.
Установка положительного отступов, и соответствующее отрицательное поле в элементе div, похоже, устраняет проблему, хотя я не знаю почему.
<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc; padding: 1px; margin: -1px"><p>Bottom Div</p></div>