保证金崩溃和清算 [英] Margin collapse and clearance

问题描述

我正在阅读W3C规范，我真的不明白一个：

如果具有间隙的元素的顶部和底部边距是
邻接，
在兄弟姐妹之后的相邻边缘，但是结果边缘不会与父块的底边距
折叠。

任何人都可以为我解释或JSFiddle吗？

解决方案

请在Firefox或IE中查看此 jsfiddle 。

 < style> 
 .case {width：200px;背景颜色：黄色; } 
 
 .container {background-color：lightblue; margin-bottom：70px; padding-top：0.01px; } 
 .preface {float：left; height：58px; width：100px; border：1px solid red; } 
 .one .intro {clear：left; margin-top：60px; } 
 .two .intro {clear：left; margin-top：59px; } 
< / style> 
 
< div class =case one> 
< div class =container> 
< div class =preface> 
 lorem ipsum 
< / div> 
< div class =intro>< / div> 
< / div> 
 after 
< / div> 
< hr> 
< div class =case two> 
< div class =container> 
< div class =preface> 
 lorem ipsum 
< / div> 
< div class =intro>< / div> 
< / div> 
 after 
< / div> 
  

（除了类名one或two 。 padding-top：0.01px; 是停止折叠到容器边缘顶部的介绍块的margin-top值）

当一个元素应用了 clear 值，使得其框实际上向下移动时，它表示有 >。我们可以看到，这种情况发生在情况二。在case case，仍然有 clear：left 但是它的上边距足够大，元素框不需要移动，因此它没有间隙。 / p>

现在看看结果。

在这种情况下，容器上的70px底部边缘与.intro div的顶部边缘折叠，在.container div的顶部和文本after之间留下一个70px的距离。在情况二，因为.intro div有清除，根据引用的规格，容器的底部边缘不能崩溃与.intro div的顶部边缘。因此，应用顶部边距，导致浅蓝色背景区域，然后单独应用容器的底部边距，导致黄色背景区域。

¹_{很抱歉，Chrome浏览器发生错误。}

I am reading the W3C specs and I really don't understand that one :

If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

Anyone could explain or JSFiddle it for me ?

解决方案

Yes. Take a look at this jsfiddle in either Firefox or IE.¹

<style>
  .case { width:200px; background-color:yellow; }

  .container { background-color:lightblue; margin-bottom:70px; padding-top:0.01px; }
  .preface { float:left; height: 58px; width: 100px; border: 1px solid red; }
  .one .intro { clear: left; margin-top:60px; }
  .two .intro { clear: left; margin-top:59px; }
</style>

<div class="case one">
    <div class="container">
        <div class="preface">
            lorem ipsum
        </div>
        <div class="intro"></div>
    </div>
    after
</div>
<hr>
<div class="case two">
    <div class="container">
        <div class="preface">
            lorem ipsum
        </div>
        <div class="intro"></div>
    </div>
    after
</div>

(The cases are identical apart from the class name "one" or "two" and their applied CSS. The padding-top:0.01px; is to stop the margin-top values of the intro block from collapsing into the margin-top of the container)

When an element has a clear value applied such that its box actually moves down, it said to have clearance. We can see that this happens in case two. In case one, the box is still has clear:left but its top margin is large enough that the element box does not need to move, so it does not have clearance.

Now look at the result.

In case one, the 70px bottom margin on the container collapses with the top-margin of the .intro div leaving a single 70px distance between the top of the .container div and the text "after". In case two, because the .intro div has clearance, in accordance with the quoted piece of the spec, the bottom margin of the container must not collapse with the top margin of the .intro div. So that top-margin is applied, resulting in the lightblue background area, and then the bottom-margin of the container is applied separately, resulting in the yellow background area.

¹_{Unfortunately, Chrome gets this horribly wrong.}

这篇关于保证金崩溃和清算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！