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

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元素具有默认的垂直边距，并且大多数块元素没有固定的高度（即默认为height: auto），因此它们只会根据其内容的高度而定。当孩子的利润率与母公司的利润率一起崩溃时，在计算父母的身高时，这些利润率为而不是。