CSS边距重叠，而不是给出距离 [英] CSS margin overlap instead of giving distance

问题描述

最近我有利润率的问题，但我不能解决。
我的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?

推荐答案

理解以什么方式解释边距。边距是指另一个元素的元素位置不包括其边距。

Again - you have to understand in what way margins are interpreted. Margin refers to another's element position not including its margins. You cannot sum margins.

这篇关于CSS边距重叠，而不是给出距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！