Html 溢出：隐藏在div标记上影响背景色

溢出：隐藏的定义说明：

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

发件人：

但我对我的js小提琴的这种行为感到好奇：

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

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


试验


我想知道为什么会发生这种行为？如果没有溢出，则确切的块元素将具有绿色背景色，但放置溢出将为其边距提供背景色。
您的颜色设置为段落的父级。没有任何东西可以阻止父div的高度尽可能扩展，因此段落边距会使父div的高度变大

如果你给你的父母一个设定的高度（18px左右），那么它会隐藏边距（从技术上讲是文本）


如果要为段落设置颜色，则在页边空白处将看不到背景色

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

这是因为
溢出：隐藏
会影响保证金折叠

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

在CSS中，两个或多个框（可能是或
可能不是同级）可以合并形成单个页边距。边距
这种结合方式被称为崩溃，由此产生的结合
边距称为折叠边距

相邻的垂直边距塌陷，除非[…未塌陷]
相关的]

[…方框的顶部边距及其第一个输入流的顶部边距
孩子[邻接]


但是，
溢出：隐藏
可防止：

建立新块格式上下文（例如
由于浮动和元素不可见，因此
和他们的孩子一起崩溃


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