Warum Marge nicht kombinieren selbst

Question

Ich frage mich, warum diese zwei divs unten nicht (per Pixel) ihre Margin-Werte kombinieren: margin-bottom von 2px plus margin-top von 2px sollte 4px geben, aber stattdessen bekomme ich 2px. Ich fand keine Erklärung dafür, hoffe, dass jemand mir helfen wird, es zu verstehen. Vielen Dank!

div,body { 
margin: 0; 
padding: 0; 
} 
#one { 
background: #990000; 
height: 100px; 
margin-bottom: 2px; 
} 
#two { 
margin-top: 2px; 
background: #00ff00; 
height: 100px; 
} 

<div id="one"> 
</div> 
<div id="two"> 
</div> 

Answer 1

, dass wegen der Marge collapsing.Only der größten Randwert ist, wird sein considered.If Sie noch die Lücke fügen Sie dann padding jedem des Elements separat erhöhen möchten.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Dank