CSS边距重叠，而不是给出距离

最近我有利润率的问题，但我不能解决。
我的HTML看起来像这样：

Lately I had problem with margins but I wasn't able to resolve it. My HTML looked like this:

<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 。

And problem was that margins overlapped each other instead of give 40px distance between two elements.

我的问题是：为什么？我发现添加到.info框溢出：hidden固定这个，但也许有更好的方法？

My question is: why? I found that adding to .info-box overflow:hidden fixed this but maybe there is better way?