Why margin not combine it self

Question

I'm wondering, why this two divs below not combine(by pixel) their margin values: margin-bottom of 2px plus margin-top of 2px should give 4px, but instead I'm getting 2px. I didn't find anywhere explanation to this, hope someone will help me to understand it. Thanks!

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

That is because of margin collapsing.Only the largest margin value will be considered.If you still want to separately increase the gap then add padding to anyone of the element.

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

Thanks