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

问题是边距彼此重叠，而不是在两个元素之间给出 40 像素的距离。

我的问题是:为什么？我发现添加到 .info-box overflow:hidden 解决了这个问题，但也许有更好的方法？

最佳答案

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

How margins work

关于html - CSS 边距重叠而不是给出距离，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14891152/

相关文章：

html - 从div中剪出形状(三 Angular 形)并在后面显示背景