Проблема с прозрачным полем

Question

Вот мой CSS (упрощенно):

body {
    background: url('bg.gif') left top;
}
#content {
     background: #ddd;
}
.box {
    overflow: hidden;
    margin-top: 10px;
    background: #1e1e1e url('left-bottom-corner.gif') left bottom no-repeat;
}

И разметка:

<div id="content">
    <div class="box">
        <p>lorem ipsum</p>
    </div>
</div>

Теперь проблема. В месте, где .box имеет верхнее поле размером 10px, фон #content div не виден, вместо этого, фон тела виден.

Я не могу использовать отступы, потому что мне нужно стилизовать div .box, чтобы они имели круглые границы и собственный фон, поэтому я должен использовать поле.

Как я могу исправить это неправильное поведение?

Answer 1

Это не ошибка - это называется сворачивание полей .

Вы могли бы не допустить касания полей - вот почему добавление отступов или границы исправляет это.