为什么这种CSS边距顶部样式不起作用？

Question

我尝试在另一个div中添加一个div的边距值。所有的工作都很好，除了顶部的值，它似乎被忽略了。但为什么？

代码：

null

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

html lang-html prettyprint-override"><div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

null

W3学校没有解释为什么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规范中的相关要点：

在CSS中，两个或多个框（可能是或不是同级框）的相邻边距可以组合成一个边距。这样组合的边距被称为折叠边距，由此产生的组合边距被称为折叠边距。

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

两个边距相邻当且仅当：

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

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

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

  上述选项防止保证金崩溃的原因是：

  • 浮动框与任何其他框之间的边距不会折叠（即使是浮动框与其流入子框之间的边距也不会折叠）。
  • 建立新块格式上下文的元素（如浮点和具有“overflow”而不是“visible”的元素）的边距不会与其在流中的子元素一起折叠。
  • 内联块框的边距不会折叠（即使与它们的流入子框一起也不会折叠）。

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

  水平边距从不折叠。