块级元素的折叠宽度高度和边距平均值是多少？

Question

这是什么意思，块级元素的宽度不能折叠，但高度可以？

而且可以请你解释一下从W3.org规范这样的文字：

在CSS中，两个或多个框的相邻边缘（这可能会或可能不会是兄弟姐妹）可结合成一个单一的余量。据说这种方式结合在一起的利润率会崩溃，并且由此产生的综合利润率被称为折叠利润率。

这个词的含义崩溃在这里造成了很大的困惑。

Answer 1

A collapsed margin是两个不同元素的边距占用相同空间时实例的名称。

请看下面的例子：

.box { 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 

 
.box1 { 
 
    background: red; 
 
    margin-bottom: 25px; 
 
} 
 

 
.box2 { 
 
    background: blue; 
 
    margin-top: 50px; 
 
}

<div class="box box1"></div> 
 
<div class="box box2"></div>

这很难说，但两个箱子之间的空白是唯一50px。你可能认为它应该是应该是是75px，因为我已经在顶部框中指定了margin-bottom的25px，并且在底部框上指定了50px的margin-top。 25 + 50 = 75，那么为什么空白只有50px？

那么，利润率不能在其中有任何内容;保证金具体表示缺少的内容。考虑到没有内容要显示在保证金中，解析器认为它们也可以合并以优化空间。

'折叠''这个词的出现是因为在技术上同时存在于同一地点的两个不同的“片段”相互“坍塌”。

注意这不发生与margin-left和margin-right：

.box { 
 
    height: 50px; 
 
    width: 50px; 
 
    float: left; 
 
} 
 

 
.box1 { 
 
    background: red; 
 
    margin-right: 25px; 
 
} 
 

 
.box2 { 
 
    background: blue; 
 
    margin-left: 50px; 
 
}

<div class="box box1"></div> 
 
<div class="box box2"></div>

以上的空间确实75px。这可能是一个让人困惑的概念，但需要注意的是，它只影响纵向利润率。有关折叠边距的更多信息，请参阅CSS Tricks和Mozilla。

同样重要的是需要注意的是，在默认情况下，块级元素占用100％它的父的宽度的，但0％高度的。

下面是一个例子说明这一点：

.parent { 
 
    background: blue; 
 
    border: 10px solid purple; 
 
    height: 50px; 
 
    width: 200px; 
 
} 
 

 
.child { 
 
    background: red; 
 
}

<div class="parent"> 
 
    <div class="child">Text</div> 
 
</div>

在上面的例子中，我指定一个width和家长一个height，虽然我不指定对孩子要么。如您所见，子元素继承宽度200px，但是不是继承了50px高度。

希望这有助于澄清这一点！