Question

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

请您从W3.org规范中解释此文本：

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

collapse 这个词的含义引起了很多混乱。

Answer 1

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，并margin-top {底部框中显示{1}}。 50px，为什么空白只有50px？

好吧，保证金不能包含任何内容;保证金特别表示内容的缺乏。考虑到没有内容可以显示在边距内，解析器认为它们可以合并以优化空间。

“崩溃”这个词的出现是因为技术上在同一个地方同时存在两个不同的“片段”边距，“折叠”在一起。

请注意25 + 50 = 75和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>。这可能是一个令人困惑的概念，但要注意它只会影响垂直边距。有关折叠边距的详细信息，请参阅 CSS Tricks 和 Mozilla 。

同样重要的是要注意，默认情况下，块级元素占其父级宽度的 100％，但 0％< / strong> 身高。

这是一个说明这个的例子：

75px

.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高度。

希望这有助于澄清一点！

折叠宽度高度和边距对于块级元素意味着什么？

1 个答案: