为什么这个 CSS margin-top 样式不起作用？

Question

我尝试在另一个 div 内的 div 上添加 margin 值。除了最高值之外，所有工作都正常，它似乎被忽略了。但为什么呢？

我的预期：

我得到了什么：

代码：

#outer {
  width: 500px;
  height: 200px;
  background: #FFCCCC;
  margin: 50px auto 0 auto;
  display: block;
}

#inner {
  background: #FFCC33;
  margin: 50px 50px 50px 50px;
  padding: 10px;
  display: block;
}

<div id="outer">
  <div id="inner">
    Hello world!
  </div>
</div>

W3Schools 没有解释为什么 margin 会出现这种情况。

Answer 1

尝试在内部div上使用display: inline-block;。就像这样：

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

Answer 2

您实际上看到的是 #inner 元素的上边距 折叠到#outer元素的上边缘，仅保留#outer边距完好无损（尽管图像中未显示） 。两个盒子的顶部边缘彼此齐平，因为它们的边距相等。

以下是 W3C 规范中的相关要点：

您可以执行以下任一操作来防止边距折叠：

上述选项防止边距折叠的原因是：

左右边距的表现符合您的预期，因为：