html - 两个只有边距的空 div 将如何折叠？

Question

两个只有边距的空 div 如何折叠？

html文件:

<div id="div1"></div>
<div id="div2"></div>

CSS 文件:

#div1 {
  margin-top: 10px;
  margin-bottom: 20px;
}

#div2 {
  margin-top: 10px;
  margin-bottom: 30px;
}

谢谢。

Answer 1

答案是:

You will have only 30px margin at the end

您正面临两种边缘崩溃。由于每个 div 都是空的，它的上边距和下边距将折叠，所以第一个我们将有 20px，第二个为 30px。然后这些边距也将一起折叠并以 30px 结尾。

您可以通过检查 html 元素的高度来验证这一点，您将看到:

#div1 {
  margin-top: 10px;
  margin-bottom: 20px;
}

#div2 {
  margin-top: 10px;
  margin-bottom: 30px;
}

<div id="div1"></div>
<div id="div2"></div>

来自sepcification :

top and bottom margins of a box that does not establish a new block formatting context and that has zero computed 'min-height', zero or 'auto' computed 'height', and no in-flow children

和

bottom margin of box and top margin of its next in-flow following sibling

---

作为旁注，正文还有一个默认边距 (8px)，并遵循此规则与其他边距折叠:

top margin of a box and top margin of its first in-flow child

和

bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height