CSS-Marge Überlappung anstelle der Entfernung

Question

In letzter Zeit hatte ich Probleme mit den Rändern, aber ich konnte es nicht lösen. Mein HTML sah wie folgt aus:

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

Und Problem war, dass die Margen einander überlappen anstelle des Gebens 40px Abstand zwischen zwei Elementen.

Meine Frage ist: warum? Ich fand, dass das Hinzufügen zu .Info-Box-Überlauf: versteckte dies behoben, aber vielleicht gibt es einen besseren Weg?

Answer 1

Wieder - Sie müssen verstehen, auf welche Weise Margen interpretiert werden. Margin bezieht sich auf die Position eines anderen Elements ohne seine Ränder. Sie können keine Ränder summieren.