html - 为什么 margin-bottom 显示为 margin-top？

Question

我尝试在父级内的 div 上添加边距底部，但它显示为父级的边距顶部。为什么？

HTML:

<div id="wrapper">
    <div id="content">
        <div id="box"></div>
    </div>
</div>

CSS:

#wrapper{
  border: 1px solid #F68004;
}

#content{
  background-color: #0075CF;
  height: 100px;
}

#box{
  margin-bottom: 50px;
}

我的预期:

我得到的:

更新:

I can fix this but i have no idea why that code not work? can someone explain?

更新 2:

看起来大多数答案都说这是因为 margin 崩溃而我的问题与 this 重复.但请注意，我设置了 ma​​rgin-bottom 而不是 ma​​rgin-top。我还阅读了有关折叠边距的信息，但我找不到任何规则说边距底部可以变成边距顶部。谁能指出我？

Answer 1

将 margin-bottom: 50px; 给 #content 而不是 #box 因为你已经给 #content div 和此处边距折叠。

Here it is explain with example

Updated Fiddle