8

它不会一直发生，但是每隔一段时间，父 div 会继承子 div 属性，并使我的布局定位失控。

例如，这是 html（伪）：

<div 1>
   <div 2>
      content here
   </div>

</div><!-- div one end -->

CSS（伪）：

#1{ margin top:0; }
#2 {margin top:10 }

它应该看起来像这样：div 1 是父级，div 2 是子级

div 1 父级

-----------------------------------------
this is address bar (top of win)
-----------------------------------------
----------------
|  ----------  |
| | div2Child  |
| ------------ |
|--------------|

假设从 div 1 到 addy 窗口没有间隙。

现在，出于某种奇怪的原因，使用上面相同的代码，当我预览时，我得到了这个：

-----------------------------------------
this is address bar (top of win)
-----------------------------------------

gap here.

----------------
|  ----------  |
| |   div2     |
| ------------ |
|--------------|

无论我做什么，我仍然得到那个差距。当我将它带到萤火虫并在 Divs 上进行测试时，div2 清楚地表明边距正在影响父母的定位。

..我打算举一个例子，但是......这里是实际的代码，所以你可以看到......（尽可能简单）

HTML：

<div id="one">
    <div id="two">content here on 2</div>
</div>

the CSS: 

    #one{
        width:1000px;
        height:300px;
        background:#09F;
        margin-top:0px !important;
padding:0px;


    }

    #two{
        width:500px;
        height:100px;
        background:red;
        margin-top:20px;
padding:0px;
    }

我仍然得到我在图表中显示的差距。让我发疯的是，像我们大多数人一样，我们已经完成了这种布局数百万次......我可以提取数十个使用相同方法并且没有问题的作品......我有我一直使用的 Cssreset。有！重要，没有随机<br/> or <p>，0填充......事实上，为了确保，我创建了一个虚拟页面，除了2个div和它们的css之外什么都没有......

关于为什么会发生这种情况的任何想法？因为现在我正在查看我创建的最后一个站点和我刚刚测试的这个虚拟 html，并且在每个浏览器上，我得到了那个愚蠢的差距。

4

2 回答 2

13

您正在观察的是边距折叠。它可能发生在并不总是容易理解的场景中，所以我建议参考文档。

于 2012-04-04T18:11:07.703 回答
1

为什么不使用：

#one{
        width:1000px;
        height:300px;
        background:#09F;
        margin-top:0px !important;
        padding-top:20px;
    }
    #two{
        width:500px;
        height:100px;
        background:red;
        margin-top:0px;
        padding:0px;
    }​

? 就是想

于 2012-04-04T18:12:40.857 回答