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

Question

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

我以前多次遇到这个问题，我通过使用解决了它 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>

Answer 1

为什么会出现这种情况？

在第一个示例中，边距在父元素内折叠。

对于某些情况，以下是有关折叠边距的相关文档：

Box Model 8.3.1 折叠边距

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

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

有一些特定的规则可以防止边距坍塌。

指定的规则之一是：

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

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

有关更多解决方法，请查看文档。