溢出：隱藏在div標籤影響的背景顏色

Question

的overflow:hidden定義指出：

the overflowing content is completely hidden, not accessible to the user.

來自：http://quirksmode.org/css/css2/overflow.html

但我很好奇這個問題從我的js小提琴： https://jsfiddle.net/gd62qmr3/2/

我注意到的一件事情是，在將溢出設置爲隱藏之後，它給了邊界顏色？

<div style="background-color:green;overflow:hidden;"> 
<p>test</p> 
</div> 

我想知道爲什麼會發生這種行爲？如果沒有溢出，確切的塊元素將具有綠色背景顏色，但是如果溢出將給背景顏色帶來邊緣。

Answer 1

這是因爲overflow: hidden影響保證金崩潰。

p元素默認有一些垂直邊距。據the spec，它縮短了與父div的保證金：

在CSS中，兩個或兩個以上的箱子毗鄰的利潤（這可能會或 可能沒有兄弟姐妹）可結合成一個單一的餘量。保證金 合併這種方式據說崩潰，並由此產生的合併 保證金被稱爲崩潰保證金。

在垂直方向鄰接利潤率崩潰_{^{，除了[...不 相關]}}

[...[被鄰接]的箱和它的第一個在流 兒童的上邊距的]上邊距

然而，overflow: hidden防止：元件

邊距該建立新的塊格式上下文（例如 作爲花車和overflow而不是visible）不要 崩潰與他們的流入兒童。

Answer 2

您的顏色設置爲段落的父級。你沒有任何東西阻止你的父div的高度擴展到所需的位置，所以段落邊距使得父高度變大。

如果你給一組高度到父（18像素左右），那麼它會隱藏利潤（和技術上文本）

div { 
    height:18px; 
} 

https://jsfiddle.net/gd62qmr3/3/

如果你設置顏色你的款，那麼你就不會看到背景色邊緣

div { 
    overflow:hidden; 
} 
div p { 
    background-color:green; 
    margin:20px 0; 
} 

https://jsfiddle.net/gd62qmr3/4/