为什么这种 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 会这样。

原文由 jamietelin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您实际上看到 --- 元素的上边距 塌陷 到 --- #outer #inner 元素的上边缘，只留下 #outer 边距完好无损（尽管没有显示在您的图像中）。两个框的上边缘彼此齐平，因为它们的边距相等。

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

8.3.1 折叠边距

在 CSS 中，两个或多个框（可能是或不是兄弟）的相邻边距可以组合形成一个边距。以这种方式组合的边距称为 折叠 边距，由此产生的组合边距称为 _折叠边距_。

相邻的垂直边距折叠 […]

两个边距 相邻 当且仅当：

• 两者都属于参与相同块格式化上下文的流入块级框
• 没有线框，没有间隙，没有填充，没有边框将它们分开
• 两者都属于垂直相邻的框边，即形成以下对之一：
  • 一个盒子的上边距和它的第一个流入孩子的上边距

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

• 浮动您的任何一个 div 元素
• 使您的任何一个 div 元素 内联块
• 将 overflow of #outer 设置为 auto （或除 visible 以外的任何值）

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

• 浮动框和任何其他框之间的边距不会塌陷（甚至在浮动框与其流入的子代之间也不会塌陷）。
• 建立新块格式化上下文的元素的边距（例如浮动和具有“溢出”而不是“可见”的元素）不会与其流入的子项一起折叠。
• 内联块框的边距不会塌陷（即使是它们的流入子框也不塌陷）。

左右边距的行为与您预期的一样，因为：

水平边距永远不会塌陷。

原文由 BoltClock 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 enderskill 发布，翻译遵循 CC BY-SA 4.0 许可协议