简单 CSS 额外浮动 Space

Simple CSS Floating Extra Space

此时 link： http://css.maxdesign.com.au/floatutorial/introduction18.htm

如果你进入 DOM 操作并关闭 .containingbox 的黑色边框，你会看到 <p> 元素立即回到它应该浮动的位置广场旁边。我知道由于 .containingbox 的边界，<p> 元素可能会被向下推一点，但它似乎被向下推到了我不明白的地步。

只是想要一点洞察力并完全理解这一点。谢谢。

当.contaningbox上没有边框时，h1 和p 元素的边距会折叠。您可以阅读有关 margin collapsing.

的更多信息

黄色区域显示此处的边距。

p 元素在用户代理样式表上有默认边距。如果将边距归零，问题就迎刃而解了。

这是由于页边距崩溃造成的。如果您添加以下内容，它会修复问题

p.highlight {
    margin: 0; /* Added this */
    padding: 0 /* Added this */
    border: 5px solid #aaa;
}