Question

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

例如，这是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 1parent

-----------------------------------------
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;
    }

我仍然得到我在图表中显示的差距。令我疯狂的是，像我们大多数人一样，我们已经完成了数百万次这样的布局......我可以使用同样的方法拉出DOZENS的作品而没有任何问题...我有我总是使用的Cssreset。有重要的，没有随机<br/> or <p>，0填充...事实上要确保，我创建了一个虚拟页面，除了2个div和他们的css之外什么都没有........ < / p>

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

Answer 1

您所观察到的是利润率下降。它可能发生在并非总是易于理解的场景中，因此我建议引用documentation。

Answer 2

为什么不使用：

#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;
    }

？只是想知道

父div继承子divs margin

2 个答案: