Question

当我使用h1添加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

为什么会发生这种情况？

在第二个示例中，添加overflow: hidden时margin(s) are collapse。

以下是相关文件：

Box Model 8.3.1 Collapsing margins

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

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

有一些特定的规则可以防止边距崩溃。规定的规则之一是：

建立新的块格式化上下文的元素的边距（例如浮点数和溢出＆＃39;除了＆＃39;可见＆＃39;之外的元素）不会因其流入的子节点而崩溃。 [link]

在您的情况下，该元素的overflow值不是默认值visible，因为它设置为hidden。因此，边距不会崩溃，并且它们包含在元素内。

有关更多解决方法，请查看the documentation。

Answer 2

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

Answer 3

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

为什么添加overflow：hidden会使子元素的边距有效？

3 个答案:

为什么会发生这种情况？