为什么保证金不能自我组合

Question

我想知道，为什么这下面的两个div不能合并（按像素）他们的边距值：2px的margin-bottom加上2px的margin-top应该给4px，但是我得到2px。我没有找到任何解释，希望有人能帮助我理解它。谢谢！

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

这是因为保证金崩溃。只会考虑最大保证金价值。如果您仍想单独增加差距，则向任何元素添加填充。

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

谢谢