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

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

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

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

两个边距相邻当且仅当： 都属于参与相同块格式化上下文的流入块级框 无行框、无间隙、无填充和无边框分隔 它们都属于垂直相邻的框边缘，即形成以下对之一：一个盒子的上边距和它的第一个流入孩子的上边距

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

浮动任何一个 div 元素 使任何一个 div 元素内联块 将#outer 的溢出设置为自动（或除可见之外的任何值）

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

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

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

水平边距永远不会塌陷。

---

尝试在内部 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;
}

---

@BoltClock 提到的内容非常可靠。在这里，我只想为这个问题添加更多的解决方案。检查此w3c_collapsing margin。绿色部分是如何解决这个问题的潜在想法。

解决方案 1

浮动框和任何其他框之间的边距不会塌陷（甚至在浮动框与其流入的子代之间也不会塌陷）。

这意味着我可以将 float:left 添加到 #outer 或 #inner demo1。

另请注意，float 会使边距中的 auto 无效。

解决方案 2

建立新块格式化上下文的元素的边距（例如浮动和具有“溢出”而不是“可见”的元素）不会与其流入的子项一起折叠。

除了 visible，让我们将 overflow: hidden 放入 #outer。而且这种方式看起来非常简单和体面。我喜欢。

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

解决方案 3

绝对定位框的边距不会塌陷（即使它们的流入子代也不会塌陷）。

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

或者

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

这两种方法会破坏div的正常流程

解决方案 4

内联块框的边距不会塌陷（即使是它们的流入子框也不塌陷）。

与@enderskill 相同

解决方案 5

流入块级元素的下边距总是与其下一个流入块级兄弟的上边距折叠，除非该兄弟有间隙。

这与问题没有多大关系，因为它是兄弟姐妹之间的折叠边距。它通常意味着如果一个顶盒有 margin-bottom: 30px 而一个兄弟盒有 margin-top: 10px。它们之间的总边距是 30px 而不是 40px。

解决方案 6

如果元素没有上边框、没有上边距且子元素没有间隙，则流入块元素的上边距与其第一个流入块级子元素的上边距一起折叠。

这很有趣，我可以添加一个顶部边界线

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

而且 <div> 默认是块级的，所以你不必故意声明它。抱歉，由于我的新手声誉，无法发布超过 2 个链接和图片。至少你下次看到类似的东西时知道问题出在哪里。

---

不知道为什么您所拥有的不起作用，但您可以将 overflow: auto; 添加到外部 div。

---

不完全确定为什么，但将内部 CSS 更改为

display: inline-block;

似乎工作。

---

如果您将任何 padding 添加到 #outer，它就会起作用。演示在这里：

#outer { 宽度：500px;高度：200px；背景：#FFCCC；边距：50px 自动 0 自动；显示：块；填充顶部：1px； } #inner { 背景：#FFCC33;边距：50px 50px 50px 50px；填充：10px；显示：块； }

---

不回答“为什么”（必须是带有折叠边距的东西），但似乎最简单/最合乎逻辑的方式来做你想做的事情就是将 padding-top 添加到外部div：

#outer { 宽度：500px;高度：200px；背景：#FFCCC；边距：50px 自动 0 自动；填充顶部：50px； } #inner { 背景：#FFCC33;边距：0px 50px 50px 50px；填充：10px； }

次要注意 - 没有必要将 div 设置为 display:block; ，除非您的代码中有其他内容告诉它不要被阻止。

---

创建新的块格式化上下文

您可以在父元素上使用 display: flow-root 以防止边距通过包含元素折叠，因为它会创建新的块格式上下文。

将溢出属性的值更改为 auto 或使用 flexbox 将具有相同的效果。

https://codepen.io/rachelandrew/pen/VJXjEp

---

尝试这个：

#outer { 宽度：500px;高度：200px；背景：#FFCCC；边距：50px 自动 0 自动；显示：表格； } #inner { 背景：#FFCC33;边距：50px 50px 50px 50px；填充：10px；显示：块； }

祝你好运！

---

我想将#inner div的位置属性设置为相对也可能有助于实现效果。但无论如何，我尝试了粘贴在 IE9 和最新 Google Chrome 上的问题中的原始代码，它们已经给出了理想的效果，无需任何修改。

---

将padding-top:50px用于外部 div。像这样的东西：

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

注意：填充会增加 div 的大小。在这种情况下，如果 div 的大小很重要，我的意思是它是否必须具有特定的高度。将高度降低 50px。：

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

---

你试过 !important 之前，它会强制一切：

margin:50px 50px 50px 50px !important;

---

如果您遇到边距折叠问题，那么要解决此问题，您可以将 display: flow-root; 添加到父容器。

除此之外，如果 margin-top 被忽略，请尝试使用负值 margin-top，例如：margin-top: -2px;

---

只是为了快速修复，请尝试将您的子元素包装到 div 元素中，如下所示 -

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

由于 outer 和 inner div 之间有 1px 的填充，inner div 的边距不会折叠。因此，从逻辑上讲，您将拥有 1px 个额外空间以及 inner 个 div 的现有边距。

---