CSS边距崩溃...没有发生？答案

【问题标题】：CSS margin collapse... not happening?CSS边距崩溃...没有发生？
【发布时间】：2013-06-29 05:24:19
【问题描述】：

我刚开始使用 CSS.... 我正在处理您可以在此处找到的代码： http://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear

据我了解，边距折叠是两个边距中较大的边距（垂直）但在这种情况下，.text_line 和图像之间的下边距变为 2px 而不是 5px，这是两个边距中较小的一个，这是为什么呢？

在 .text_line 中，如果你删除-

margin-bottom:2px;

然后margin变成5px，这是正常的。

我认为“clear:both;”与它有关，但仅删除 clear 属性也会产生 2px 的边距，而不是 5px。

为什么？？？

这里是代码，如果你不想访问链接...

 .thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}

class thumbnail 用于图像，text_line 用于

【问题讨论】：

标签： css margin

【解决方案1】：

不是 2px，而是 7px。如果您将背景颜色设置为 .text_line，您可以看到这一点。根据CSS 2.1 spec，浮动框的边距不会塌陷（见第二条注释）。

【讨论】：

【解决方案2】：

边距没有折叠。当您禁用 margin-bottom 时，您真正看到的是边距返回到 浏览器默认值，（对我而言）它比最初给出的 2px 大得多。

如果您将 * { margin: 0; padding: 0; } 添加到 CSS 的顶部，您应该会看到更接近预期的行为。

尝试使用Firebug，它可以让您有选择地禁用样式。它应该可以帮助您了解页边距的实际情况。

【讨论】：