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

再次 - 您必须了解边距的解释方式。边距是指另一个元素的位置，不包括它的边距。您不能对边距求和。