为什么保证金底部显示为保证金最高？

Question

我尝试在父级内的div上添加margin-bottom,但它显示为父级的margin-top.为什么？

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;
}

我的期望:

我得到了什么:

更新:

我可以解决这个问题,但我不知道为什么代码不起作用？谁能解释一下？

更新2:

看起来大多数回答是因为保证金崩溃而且我的问题与此重复.但请注意,我设置了保证金 -但不是保证金.我还读到了关于利润率下降的问题,我发现没有任何规则可以说利润率可能会成为保证金最高点.有人能指出我吗？

Answer 1

给margin-bottom: 50px;到#content的,而不是#box因为你给了高度#content的div和这里保证金崩溃.

这里用例子来解释

更新小提琴

Answer 2

保证金似乎位于顶部的原因是保证金崩溃:

父级和第一个/最后一个子级
如果没有边框,填充,内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开,或者没有边框,填充,内联内容,高度, min-height或max-height将块的margin-bottom与其最后一个子节点的margin-bottom分开,然后这些边缘崩溃.折叠的保证金最终在父母之外.

如果添加透明边框添加到父div(#content),那么您的边距将表现为:

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

#content{
  border:1px solid transparent;
  background-color: #0075CF;
  height: 100px;
}

#box{
  margin-bottom: 50px;
  height:10px; background-color:red;
}

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

如果您希望底部的空白区域与预期图像一样,只需添加 padding-bottom:50px到#wrapper

更新

为什么margin-bottom导致margin-top:当折叠边距移动到父div之外时,它变为父元素外部元素的边缘底部(这是顶部边界#wrapper) - 这会推动你的#contentdiv(使其看起来像margin-top)