CSS margin overlap instead of giving distance [duplicate]

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

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.