html / css恼人的默认行为

时间:2010-08-20 14:07:29

标签: html css

问题在于:

我有2个div - 第一个有浮动:左 - 第二个有一个保证金顶部

现在为什么,为什么这个margin-top也适用于第一个div?

这是一个带有背景颜色的演示来获得想法:

http://dl.dropbox.com/u/4225936/whyyyyy.htm

-Edit:我不是在寻找解决方案,而是为了解释这种行为。谢谢大家:)

3 个答案:

答案 0 :(得分:3)

您正在遇到名为margin-collapse的内容。

如果两个边距相邻,则较大的边距优先。由于第二个div上的边距与容器 div上的边距相邻,因此这些边距会崩溃,较大的边距(50px)会优先,并会影响它们。

如果向容器添加顶部填充,则效果将被删除,因为边距不再相邻。

修改:请注意,“较大”有时并不完全正确。例如,负边际优先于零边际。我还没有完全测试过计算的结果,所以要把“更大”加上一粒盐。

答案 1 :(得分:1)

为第二个div提供float:left;

<div style="background: none repeat scroll 0% 0% red; margin: 0pt;">
<div style="background: none repeat scroll 0% 0% green; float: left;">hello</div>
<div style="background: none repeat scroll 0% 0% gold; margin-top: 50px; float: left;">hello</div>

here结果。

答案 2 :(得分:0)

您可以使用padding-top而不是margin-top