计算包含框的高度和折叠边距[关闭]

Question

当一个包含框的顶部margin与其第一个孩子的顶部margin折叠时，如何计算包含框的height（示例中为div）？

举个简单的例子：

div {
  margin: 40px 0 25px 0;
  background: yellowgreen;
  /*   border:1px solid black; */
}
p {
  margin: 20px 0 20px 0;
  background: lightgreen;
  padding: 10px;
}

<div>
  <p>Paragraph content</p>
</div>

p 是与div 合并的边距，因此我们看不到div 的背景颜色。将border 添加到div 可以阻止边距折叠。

但是，因为 p 的 margin 也是 div 的 margin ，这意味着 div 不再完全包含 p。这是违反直觉的。

我浏览了Calculating heights and margins 规范和Collapsing margins 并找不到如何计算height 的div。因为无法确定p的height。

Answer 1

在这种情况下，div 将具有与 p 相同的 height，因为 collapsing margins（除了 padding）

您可以通过计算font-size * line-height 知道ps height，在您的情况下是：

font-size: 16px * line-height:1.25 = 20px

所以，

• p有height:20px
• div，由于p 有一个额外的10px 和padding，它会让 它是height:40px

body {
  margin: 0
}
div {
  margin: 40px 0 25px;
  background: red;
  /*   border:1px solid black; */
}
p {
  margin: 20px 0;
  background: lightgreen;
  padding: 10px
}

<div>
  <p>Paragraph content</p>
</div>

参见：

• Mastering margin collapsing
• What You Should Know About Collapsing Margins

注意：（作者@LGSon）

当font-size/line-height未设置时，使用浏览器默认值，在这种情况下可以给div不同的输出/大小