为什么margin-bottom显示为margin-top？答案

【问题标题】：Why does margin-bottom show as margin-top?为什么margin-bottom显示为margin-top？
【发布时间】：2016-06-23 14:11:01
【问题描述】：

我尝试在父级内部的 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：

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

【问题讨论】：

stackoverflow.com/questions/9519841/…
我又更新了我的问题，谢谢！
@MinhHoang 如果您的问题解决了。您应该通过单击正确的符号来接受任何解决您问题的答案。
@ketan 我的问题还没有解决。
@Pete 我把 margin-bottom 但不是 margin-top

标签： html css

【解决方案1】：

给margin-bottom: 50px; 给#content 而不是#box 因为你给了#content div 的高度，这里边距折叠。

Here it is explain with example

Updated Fiddle

【讨论】：

【解决方案2】：

margin 出现在顶部的原因是margin collapsing：

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

如果您向父 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 之外时，它会变成父 div 之外元素的边距底部（这是 #wrapper 的顶部边框） - 这会推动您的#content div down（让它看起来像 margin-top）

【讨论】：

作为您的更新，如果我将 margin-top 设置为 #box 而不是 margin-bottom 那么它将成为 #wrapper 上边框的 margin-top 对吗？那为什么我得到相同的结果？谢谢！

【解决方案3】：

你可以这样尝试：Demo

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

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

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

【讨论】：

【解决方案4】：

这是符合您期望的 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>

【讨论】：

【解决方案5】：

请检查以下代码

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

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

【讨论】：

【解决方案6】：

您应该将边距留给#content 而不是#box。如果你只想给#box 留出余量。尝试给它负值，即 -(50+div 高度) 如果 div #box 高度为 150px 则使用-

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案8】：

试试这个

CSS

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

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

【讨论】：