为什么添加溢出：隐藏使子元素的边距起作用？答案

【问题标题】：Why does adding overflow: hidden make the child element's margin work?为什么添加溢出：隐藏使子元素的边距起作用？
【发布时间】：2016-02-17 08:17:42
【问题描述】：

当我用margin: 30px 0; 添加像h1 这样的元素时，边距会超出容器！

我之前多次遇到这个问题，我通过使用overflow: hidden解决了它

我想弄清楚问题出在哪里以及为什么这个解决方案有效？

在这里找到一个 JSFiddle https://jsfiddle.net/LeoAref/zv6c2c2d/

.container {
  background: #ccc;
}
.container.overflow {
  overflow: hidden;
}
.secTitle {
  margin: 30px 0;
}
code {
  color: blue;
}

<!-- secTitle margin goes outside the container -->
<div class="container">
  <h1 class="secTitle">Container without <code>overflow: hidden</code></h1>
</div>

<!-- works fine here -->
<div class="container overflow">
  <h1 class="secTitle">Container with <code>overflow: hidden</code></h1>
</div>

【问题讨论】：

为什么不能使用填充来代替？这就是它的设计目的！
@jbutler483 我可以使用许多其他方式，但我想弄清楚为什么会这样。
margin 位于元素之外。

标签： html css overflow margin margins

【解决方案1】：

.container.overflow

应该是

.container .overflow

.container {
    background: #ccc;
}

.container .overflow {
    overflow: hidden;
}

.secTitle {
    margin: 30px 0;
}

code {
    color: blue;
}

<!-- secTitle margin goes outside the container -->
<div class="container">
    <h1 class="secTitle">
        Container without 
        <code>overflow: hidden</code>
    </h1>
</div>

<!-- works fine here -->
<div class="container overflow">
    <h1 class="secTitle">
        Container with 
        <code>overflow: hidden</code>
    </h1>
</div>

【讨论】：

【解决方案2】：

为什么？因为边距意味着在元素之外，这里不考虑h1 边距。默认情况下，overflow 处于可见状态并呈现在 h1 容器之外。这很难解释，但我试过了！希望我能帮上忙。

【讨论】：

@LeoAref 我添加了一个解释原因的答案并参考了官方文档。

【解决方案3】：

为什么会这样？

在第一个示例中，父元素中的margin(s) are collapsed。

在某些情况下，这里是有关折叠边距的相关文档：

Box Model 8.3.1 Collapsing margins

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

当两个或多个边距折叠时，生成的边距宽度是折叠边距宽度的最大值。在负边距的情况下，从正相邻边距的最大值中减去负相邻边距的绝对值的最大值。如果没有正边距，则从零中减去相邻边距绝对值的最大值。

有一些特定的规则可以防止边距折叠。

指定的规则之一是：

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

在您的情况下，该元素的 overflow 值不是默认值 visible，因为它设置为 hidden。因此，边距不会折叠，它们包含在元素中。

如需更多解决方法，请查看the documentation。

【讨论】：