2

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

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

在 .text_line 中，如果您删除 -

边距底部：2px；

然后边距变为5px，这是正常的。

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

为什么？？？

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

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

类缩略图用于图像，text_line 用于

4

2 回答 2

0

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

于 2013-06-28T21:05:46.030 回答
0

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

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

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

于 2013-06-28T21:18:46.977 回答