Html 奇怪的行为

我不理解以下行为：

如果我取一个

div

，设置

top

和

bottom margins

，并且div的

高度
为
0px
，则只会使用上边距，但如果我将div的高度设置为1px，则一切正常


为什么会这样


编辑
根据@Krzysztof-Trzos上引用的文章，我理解这种行为是基于

空块

如果没有边框、填充、内联内容、高度或最小高度来分隔块的页边距顶部和页边距底部，则其顶部和底部页边距将塌陷

在同一篇文章中，有

浮动和绝对定位元素的边距永远不会塌陷

因此，为了防止出现这种情况，您可以设置
float:left
属性或
overflow:auto


（第二次使用thx到@SW4）
尝试使用
填充
而不是
边距


我认为边缘的问题在于它自身是重叠的。就像有两个容器，一个在另一个上面，第一个容器有
marginbottom:10px和第二个
页边距顶部：10px。它们之间的空间是10px，而不是20px

并且，在本文中发现：


空块

如果没有边框、填充、内联内容、高度或最小高度来分隔块的页边距顶部和页边距底部，则其顶部和底部页边距将塌陷

这是由于

块的上边缘和下边缘有时合并（折叠）
合并为单个页边距，其大小为所有页边距之和的最大值
一种被称为边缘塌陷的行为

您可以通过使用填充或使用
overflow:auto
或
overflow:hidden
在折叠的元素上强制一个新元素来克服它

块格式上下文是块的可视化CSS呈现的一部分
网页。它是块框布局发生的区域
浮点数之间相互作用

我认为这更多的是因为
高度中缺少
边框
：0
div
而不是
高度本身。@hiddenhobes-如果您设置
边框：0px
第一个示例无论如何都有效忽略我的原始注释，可能值得一看。特别是：空块如果没有边框、填充、内联内容、高度或最小高度来分隔块的页边距顶部和底部，则其顶部和底部页边距将塌陷。我这里不是100%确定，但我相信，它的行为方式是，如果保证金无法检测到任何东西，那么它就没有任何东西可以将保证金放在后面或之前，因此它们只是相互重叠。我可能是错的。@TheGr8_Nik-在下面为您添加了一些额外的信息。我知道它与填充物一起工作，但我想了解这种行为。我认为边缘的问题在于它自身重叠。就像有两个容器，一个在另一个上面，第一个容器有
marginbottom:10px和第二个
页边距顶部：10px。它们之间应该有空间
10px
，而不是
20px
。另外还有一个空间放文章