爲什麼添加邊框會改變高度計算？

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），因此它們只會根據其內容的高度而定。當孩子的利潤率與母公司的利潤率一起崩潰時，在計算父母的身高時，這些利潤率爲而不是。