Наложение поля CSS, а не расстояние

Question

В последнее время у меня была проблема с полями, но я не смог ее решить. Мой HTML выглядит следующим образом:

<div class="info-box">Some text</div> 
<div class="form">...</div> 

CSS:

.info-box{ 
    border-radius: 5px; 
    border: 1px solid red; 
    margin-bottom: 20px; 
} 

.form{ 
    margin-top: 20px; 
} 

И проблема в том, что поля перекрываются друг с другом, а не дают 40px расстояние между двумя элементами.

Мой вопрос: почему? Я обнаружил, что добавление в .info-box overflow: скрытое исправление, но, может быть, есть лучший способ?

Answer 1

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