html - 溢出 :hidden on div tag affects background color

Question

overflow:hidden 的定义指出:

溢出的内容完全隐藏，用户无法访问。

来自:http://quirksmode.org/css/css2/overflow.html

但我很好奇我的 js fiddle 中的这种行为: https://jsfiddle.net/gd62qmr3/2/

我注意到的一件事是，在将溢出设置为隐藏后它给边距添加了颜色？

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

我想知道为什么会出现这种行为？如果没有溢出，确切的 block 元素将具有绿色背景色，但放置溢出将为其边距提供背景色。

Answer 1

那是因为overflow: hidden影响了margin collapse。

p 元素默认有一些垂直边距。根据the spec ，它与父 div 的边距一起折叠:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse_{^{, except [... not relevant]}}

[... The] top margin of a box and top margin of its first in-flow child [are adjoining]

但是，overflow: hidden 阻止了:

Margins of elements that establish new block formatting contexts (such as floats and elements with overflow other than visible) do not collapse with their in-flow children.