1. 首页
  2. 问题
  3. 为什么这种CSS边距顶部样式不起作用？
一尘不染

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

html

我尝试在另一个div内的div上添加边距值。除最高值外，其他所有方法均正常运行，似乎被忽略了。但为什么？

我的期望：
我对保证金的期望是：50px 50px 50px 50px;

我得到的是：
我得到的保证金是：50px 50px 50px 50px;

码：

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

阅读 488

收藏
2020-05-13

共1个答案

一尘不染

您实际上看到的是#inner元素的顶部边缘塌陷到元素的顶部边缘#outer，仅保留了#outer边缘空白（尽管未在图像中显示）。两个框的顶部边缘彼此齐平，因为它们的边距相等。

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

8.3.1利润下降
在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以合并形成一个边距。以此方式合并的边距被称为崩溃，并且合并后的边距被称为崩溃边距。

相邻的垂直边距崩溃[…]

当且仅当以下情况，两个边距相邻：

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

  • 您可以执行以下任一操作来防止边距崩溃：

  • 浮动任何一个div元素

  • 使任何一个div元素内联块
  • 设置overflow的#outer对auto（或任何值以外visible）

上述选项防止边距崩溃的原因是：

  • 浮动框与任何其他框之间的边距不会折叠（甚至在浮动框及其流入子框之间也不会折叠）。
  • 建立新块格式上下文的元素（例如浮点数和具有“可见”以外的“溢出”的元素）的边距不会随其流入子元素而崩溃。
  • 内联阻止框的边距不会折叠（即使带有其流入子框也不会折叠）。

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

水平边距永远不会崩溃。

2020-05-13