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的距离。

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

- adi86

---

你能发布更多的内容吗？它们的容器还有其他的CSS和HTML。 - Bk Santiago

Answer 1

需要再次理解边距是如何被解释的。边距是指另一个元素的位置不包括其边距。你不能把边距加起来。

- kamil-mrzyglod

---

是的，但为什么当我将 overflow: hidden 添加到 .info-box 时它有效呢？我认为填充可以相加吗？ - adi86

@user1785951 - 我尝试了你的建议，但对我没有用 :) 是的，填充可以相加，因为它们在块元素内 - 它们指的是包含元素，而不是兄弟元素。但你必须记住，它们不像边距那样工作。 - kamil-mrzyglod

W3C规范表明，当两个元素的垂直外边距相接触时，只有具有较大外边距值的元素的外边距将被保留，而具有较小外边距值的元素的外边距将被折叠为零。外边距是指元素位置不包括其外边距的另一个元素的距离。你可以将内边距相加但不能将外边距相加。 - Kurenai Kunai

迄今为止最佳答案。甚至比被标记为重复的文章中的答案更好。 - Vinz

如果您的元素是内联的，则边距将与底部元素相加。 - ness-EE