为什么添加overflow：hidden使子元素的margin是有效的？ [英] Why does adding overflow: hidden make the child element's margin work?

问题描述

当我在 margin：30px 0; 中添加像 h1 的元素时，

我之前遇到过这个问题很多次，我使用 overflow：hidden

$

我想知道这是什么问题，以及为什么这个解决方案有效？ https://jsfiddle.net/LeoAref/zv6c2c2d/

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

 <！ -  secTitle margin在容器之外 - >< div class =container > < h1 class =secTitle>无< code> overflow的容器：hidden< / code>< / h1>< / div> container overflow> < h1 class =secTitle>包含< code> overflow：hidden< / code>的容器< / h1>< / div>  

>

解决方案

为什么会发生？

在第二个示例中，利润率在您添加 overflow：hidden 。

以下是相关文档：

盒子模型8.3.1折叠边距

在CSS中，两个或多个框（可能是或不是兄弟）以形成单个边缘。

当两个或多个边距合拢时，生成的边距宽度为最大值的折叠边距宽度。在负余量的情况下，负相邻余量的绝对值的最大值从正相邻余量的最大值中扣除。如果没有正边距，则相邻边距的绝对值的最大值从零中扣除。

有特定的规则将防止边缘坍塌。规定的规则之一是：

建立新块格式化上下文的元素的边距（例如浮点数和除溢出'可见'）不与他们的流入的孩子崩溃。 [link]

在你的情况下，元素有一个 overflow c $ c> visible ，因为它设置为 hidden 。因此，边距不会折叠，并且它们包含在元素中。

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

When I add an element like h1 with margin: 30px 0;, the margin goes outside the container!

I faced this problem many times before, and I solved it by using overflow: hidden

I want to figure out what's the problem and why this solution works?

Find a JSFiddle here 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>

解决方案

Why is this occurring?

In the second example, the margin(s) are collapse when you add overflow: hidden.

Here is the relevant documentation:

Box Model 8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.

There are specific rules that will prevent the margins from collapsing. One of the rules specified is:

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children. [link]

In your case, the element has an overflow value other than the default, visible, since it is set to hidden. Thus, the margins don't collapse, and they are contained within the element.

For more workarounds, check out the documentation.

这篇关于为什么添加overflow：hidden使子元素的margin是有效的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！