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：hidden修复了这个，但也许有更好的方法？

Answer 1

再次 - 您必须了解边缘的解释方式。保证金指的是另一个元素位置不包括其边距。你不能总和利润。