父div继承子div边缘

它并不总是发生，但每过一段时间，父div继承子div属性并抛出我的布局定位出重击。父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孩子

格1parent

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

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

现在，一些奇怪的原因，使用上面相同的代码，当我预览，我得到这个：

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

gap here. 

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

无论我做什么我仍然得到了这个空白。当我把它带到萤火虫并在Divs上测试时，div2清楚地显示出margin是影响父母的定位。

..我打算把了一个例子，但...以及继承人的实际代码，所以你可以看到... ...（简单即可）

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填充......事实上，使得SURE，我创建了一个除了2个div和他们的css之外什么都没有的虚拟页面，并且仍然........

任何想知道为什么会发生这种情况？因为现在我看着我的最后一个网站创建和这个虚拟的HTML我只是为了测试，并在每个浏览器，我得到那个愚蠢的差距。

来源

2012-04-04 somdow

折叠边缘.. – thirtydot 2012-04-04 18:09:21

有时边缘会被忽略，当它们互相影响时，意味着如果在顶部div上有20的顶部边距和20的底部边距，之间的边距将是20，也许这是一个类似的情况..粘贴一些HTML和CSS我会尝试在jsfiddle.net上发布一个解决方案并发布一个解决方案 – Grigor 2012-04-04 18:09:22

那么所有的html都有lol。从字面上看，如果你看我的帖子的底部，这个HTML是我在空白页上添加的HTML来测试这个混乱...我得到的差距... – somdow 2012-04-04 18:11:55

你正在观察的是边缘崩溃。它可能发生在并不总是直截了当的情况下，所以我建议引用documentation。

来源

2012-04-04 18:11:07 kinakuta

为什么不使用：

#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-04 18:12:40

很好，因为，我的意思是我可以，但那就是不是我想要你知道的......我无法站在这样的愚蠢的小问题寻找解决方法....但你是100％正确的大声笑。 – somdow 2012-04-04 18:14:49

kinakuta发布你正在寻找什么。查看“家长和第一个/最后一个孩子”部分 – 2012-04-04 18:15:42

父div继承子div边缘

回答

相关问题