html - CSS margin overlap instead of giving distance

Question

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

And problem was that margins overlapped each other instead of give 40px distance between two elements.

My question is: why? I found that adding to .info-box overflow:hidden fixed this but maybe there is better way?

Answer 1

繰り返しますが、マージンがどのように解釈されるかを理解する必要があります。マージンは、そのマージンを含まない別の要素の位置を指します。マージンを合計することはできません。