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

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

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

父母和第一个/最后一个孩子
如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或最大值 - 高度将块的边缘底部与其最后一个子节点的边缘底部分开，然后这些边距崩溃。 折叠的保证金最终在父母之外。

如果添加透明边框添加到父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的顶部边框） - 这会推动你的#content div （使它看起来像margin-top）

Answer 3

这是你的期望的jsFiddle：

的jsfiddle

如你所愿，黄色边框在整个内容周围，所以最好扩展你的包装高度。

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

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

Answer 4

您可以尝试这样： 演示

您可以将其用于#box ，而不是将高度设置为#content

#content {
  background-color: #0075CF;        
}

#box {margin-bottom: 50px; height: 100px;}

Answer 5

请检查以下代码

#content {
  background-color: #0075cf;
  height: 100px;
  margin-bottom: 50px;
}

#box{
  /* margin-bottom: 50px; */
}

Answer 6

您应该为#content而不是#box提供保证金。 如果你想只为#box提供保证金。 尝试给它减去负值，即 - （50 + div高度）如果div #box height是150px那么使用 -

 #box { margin-bottom: -200px; } 

Answer 7

解决方案1：

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

解决方案2：

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


  <style>
    #wrapper{
    border: 1px solid #F68004;
    height: 150px;
   }

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

#box{
    /*margin-bottom: 50px;*/
  }
 </style>

Answer 8

试试这个

CSS

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

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