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

Question

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

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

Fiddle demo

CSS：

p { display: block; margin: 1em }    

HTML：

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

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

这种行为的原因是什么？

Answer 1

第一个p元素的边距为collapsing，其父级为div。这意味着p元素上的边距与div上的零边距相结合，导致它们越过div的边界。因此，报告div的高度与其p子项的高度相同。

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

请记住，p元素具有默认的垂直边距，并且大多数块元素没有固定的高度（默认情况下为height: auto），因此它们只有适合所需的高度他们的内容。当孩子的边距与其父边缘折叠时，在计算父母的身高时，这些边距不。