Наложение границ CSS вместо того, чтобы давать расстояние

В последнее время у меня была проблема с полями, но я не смог ее решить. Мой 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: hidden исправлено, но, может быть, есть лучший способ?