свойство margin-bottom последнего элемента div не «расширяет» div

Question

У меня есть элемент в div, который имеет фоновое изображение. Ниже div у меня есть еще один div с другим фоновым изображением. Теперь проблема в том, что если к последнему элементу, содержащемуся в первом элементе div, применено поле margin-bottom, между двумя элементами div будет пробел, подобный этому:

Снимок экрана http://img40.imageshack.us/img40/5603/littlesnapperh.png

Обратите внимание на серый разрыв, вызванный свойством margin-bottom элемента h2, содержащегося в первом div. Я знаю, что это можно решить, если я переключу margin-bottom на padding-bottom, но что если мне понадобится margin-bottom?

Как это исправить?

Answer 1

Эта функция известна как сворачивание полей. См .: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Самый простой способ (кроме замены поля отступом, как вы предлагаете) - добавить небольшую (1 пиксель) невидимую границу или отступ для внешнего элемента.

Answer 2

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