html - CSS margin overlap instead of giving distance -

html - CSS margin overlap instead of giving distance -

this question has reply here:

css margins overlap problem 4 answers

lately had problem margins wasn't able resolve it. html looked 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 margins overlapped each other instead of give 40px distance between 2 elements.

my question is: why? found adding .info-box overflow:hidden fixed maybe there improve way?

again - have understand in way margins interpreted. margin refers another's element position not including margins. cannot sum margins.

html css