поле занимает место, но без фона

Я продолжу свой комментарий с объяснением

Причина, по которой это происходит, заключается в том, что правило рутинного поля.

Подробнее об этом можно узнать в официальной документации w3 http://www.w3.org/TR/CSS2/box.html#collapsing-margins

и в случае, если связь становится мертвой:

8.3.1 Коллапсирующие поля

В CSS смежные поля двух или более ящиков (которые могут или не могут быть братьями и сестрами) могут объединяться, чтобы сформировать единый запас. Полагают, что поля, которые объединяются таким образом, разрушаются, а полученный комбинированный запас называется скомпенсированным запасом.

Присоединение вертикальных полей сворачивается, за исключением:

Поля поля корневого элемента не разрушаются. Если верхнее и нижнее поля элемента с зазором прилегают, его поля сворачиваются с соседними полями следующих братьев и сестер, но этот результирующий запас не разрушается с нижним пределом родительского блока. Горизонтальные поля никогда не разрушаются.

Два поля смежны тогда и только тогда, когда:

оба относятся к блочным блокам в потоке, которые участвуют в одном и том же контексте форматирования блока, без полей, без зазоров, без отступов и без их границ. Обратите внимание, что определенные строки строк нулевой высоты (см. 9.4.2) игнорируются для эта цель.) оба относятся к вертикально смежным краям ящиков, то есть образуют одну из следующих пар: верхний край поля и верхний край его первого в потоке дочернего нижнего поля коробки и верхнего края следующего следующего потока sibling нижнего края последнего дочернего элемента в потоке и нижнего поля его родителя, если у родителя есть "авто" вычисленный верхний и нижний поля высоты поля, который не устанавливает новый формат форматирования блока и который имеет нулевую вычисленную "минимальную высоту" ', ноль или' автоматически 'вычисляемая "высота", а не дети в потоке. Коллапсированный марж считается смежным с другим полем, если какой-либо из его краев компонента примыкает к этому полю.

Заметка. Примыкающие поля могут генерироваться элементами, не связанными с братьями и сестрами или предками.

Обратите внимание, что приведенные выше правила подразумевают, что:

Поля между плавающей рамкой и любой другой коробкой не сворачиваются (даже не между поплавком и дочерними потоками). Поля элементов, которые создают новые контексты форматирования блоков (например, float и элементы с "переполнением", отличные от "видимых"), не сворачиваются с их дочерьми в потоке. Поля абсолютно помещенных коробок не рушатся (даже с их детьми в потоке). Поля встроенных блоков не сворачиваются (даже с их дочерьми в потоке). Нижний край элемента уровня блока в потоке всегда сворачивается с верхним краем его следующего дочернего узла на уровне блока в потоке, если только у этого брата нет разрешения. Верхнее поле блока потока в потоке сворачивается со своим первым верхним полем верхнего уровня на уровне блока, если элемент не имеет верхней границы, нет верхнего заполнения, а у ребенка нет разрешения. Нижний край блока блока в потоке с "высотой" "авто" и "минимальной высотой" нуля сворачивается с последним полем нижнего поля на уровне блока на потоке, если в поле нет дна и нет нижняя граница и край дочернего дна не разрушаются с верхним краем, который имеет разрешение. Коробка собственных полей сворачивается, если свойство "min-height" равно нулю, и оно не имеет ни верхних, ни нижних границ, ни верхнего или нижнего заполнения, а оно имеет "высоту" 0 или "авто", и оно не содержит поле строки и все его дочерние поля в потоке (если они есть) разрушаются. Когда два или более поля рушится, результирующая ширина поля является максимальной шириной сжимающихся полей. В случае отрицательных полей максимум абсолютных значений отрицательных смежных полей вычитается из максимума положительных смежных полей. Если нет положительных полей, максимум абсолютных значений смежных полей вычитается из нуля.

Если верхнее и нижнее поля ящика прилегают, то возможно, что поля могут провалиться через него. В этом случае позиция элемента зависит от его отношения с другими элементами, поля которых рушится.

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

Используйте это,

Конечно, он будет работать нормально

#content {
    background-color: #FFFFFF;
    display: inline-block;
    height: 300px;
    margin-top: 20px;
    position: relative;
    text-align: center;
    width: 720px;
}