Il margine CSS si sovrappone invece di dare la distanza

Question

Ultimamente ho avuto problemi con i margini ma non ero in grado di risolverlo. mio HTML si presentava così:

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

E problema era che i margini sovrapposti l'un l'altro invece di dare 40px distanza tra due elementi.

La mia domanda è: perché? Ho trovato che l'aggiunta di .info-box overflow: nascosto risolto questo, ma forse c'è modo migliore?

Answer 1

Ancora: è necessario capire in che modo vengono interpretati i margini. Il margine si riferisce alla posizione dell'elemento di un altro escluso lo i suoi margini. Non puoi sommare i margini.