两个只有边距的空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

答案是：

最后你只有 30px 的边距

您面临两种利润崩溃。由于每个 div 都是空的，它的上边距和下边距将会折叠，因此对于第一个 div，我们将拥有20px，而对于第二个 div，我们将拥有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>

从规格来看：

盒子的顶部和底部边距，不建立新的块格式上下文，并且计算的“最小高度”为零，计算的“高度”为零或“自动”，并且没有流入子项

和

盒子的底部边距和其下一个流入的同级的顶部边距

附带说明一下，正文还有一个默认边距 ( 8px)，它与遵循此规则的其他边距折叠：

框的上边距及其第一个流入子项的上边距

和

最后一个流入子级的底部边距及其父级的底部边距（如果父级具有“自动”计算高度）