html - 为什么添加边框会改变高度计算？

Question

我有两个div容器，一个有边框，一个没有边框。
在两个容器中，我得到了p一个边距为1em.

显然，两个容器应该具有相同的高度。
令人惊讶的是，Firefox、Chrome、Safari 和 IE 并非如此。

小提琴演示

CSS：

p { display: block; margin: 1em }    

HTML：

<div>
    <p></p>
</div>

<div style="border: 1px solid black">
    <p></p>
</div>

这种行为的原因是什么？

Answer 1

第一个p元素的边距正在与其父级折叠div。这意味着p元素上的边距与您的零边距相结合div，导致它们跨越div. 因此，div据报道 的高度与其p子项相同。

在第二组元素中，添加边框时可以防止边距塌陷。这会导致父元素div完全包含p元素及其边距。因此，高度div成为p元素高度和垂直边距的总和。

请记住，p元素具有默认的垂直边距，并且大多数块元素没有固定的高度（即height: auto默认情况下），因此它们的高度仅与适合其内容所需的高度一样高。当子级的边距与其父级的边距折叠时，计算父级的高度时不包括这些边距。