为什么保证金不自己合并

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

这是因为边距 collapsing.Only 最大的边距值将是 considered.If 你仍然想单独增加间隙然后向任何元素添加填充。

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

谢谢

为什么保证金不自己合并

Why margin not combine it self

html

css

margin