Margines CSS nakłada się, zamiast podawać odległość

Question

Ostatnio miałem problem z marginesami, ale nie byłem w stanie go rozwiązać. Moje HTML wygląda tak:

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

A problemem było to, że marże pokrywały się wzajemnie, zamiast dać 40px odległość między dwoma elementami.

Moje pytanie brzmi: dlaczego? Zauważyłem, że dodanie do .info-box overflow: hidden naprawiło to, ale może jest lepszy sposób?

Answer 1

Jeszcze raz - musisz zrozumieć, w jaki sposób interpretowane są marginesy. Marża odnosi się do pozycji innego elementu , z wyłączeniem jego marginesów na poziomie. Nie można sumować marginesów.