我有一个内部的div内含div。内部div的边际影响包含div的边际

HTML

<div id="container"> 
    <div id="inner"></div> 
</div>

CSS

#container { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 
#inner { 
    margin: 30px; 
    width: 40px; 
    height: 40px; 
    background-color: black; 
}

小提琴

http://jsfiddle.net/8xUTJ/4/

我希望这使一个小黑匣子在一个更大的红色框垂直和水平居中。相反，我得到一个黑盒子粘在红色盒子的顶部，红色盒子有边缘顶部。

有人可以解释CSS认为它在这里做什么？

来源

2012-09-28 Bobby

感谢以及斑点问题。花了我好几年才发现我的代码中发生了什么。 – djpalme

将overflow:auto添加到#container div。

jsFiddle example

或者

边框添加到#container股利。

您可以在W3C上了解有关折叠边距行为的更多信息。

来源

2012-09-28 00:52:26 j08691

不确定谁低估了这一点，但如果您认为对答案没有用处，请说出来。 – j08691

只是说这不是我，尽管你对我的答案赞不绝口;） –

再次道歉。您对我的解决方案和倒计时的评论是在几秒钟内发生的......所以我只是做了一个假设。我的错。我也希望人们能够解释赞誉，而不是仅仅发出反对意见的无礼姿态。 –

方法1

position:absolute用于内DIV，所以它知道什么是30PX余量从

http://jsfiddle.net/8xUTJ/5/

方法2

display:inline-block的内格

http://jsfiddle.net/8xUTJ/7/

方法3

border:solid 0 transparent到外层div

http://jsfiddle.net/8xUTJ/8/

你选:)

来源

2012-09-28 00:51:30

虽然提供的解决方案是可行的，但没有人解释这个问题。这就是所谓的边缘崩溃，这种情况发生在几种情况下。

情况1 - 这些项目将只相距30px，因为边距一起崩溃，较大的一个占优势。

<div style="margin-bottom: 20px"></div> 
<div style="margin-top: 30px"></div>

场景2 - （您的场景）内框的边距溢出外框。

<div class="outer"> 
    <div style="margin-top: 20px"></div> 
</div>

解决方法是给外框一些填充或边框（由他人建议）。很多时候，我用的外包装盒下面的CSS来缓解这样的情况：

.outer { 
    margin-top: -1px; 
    border-top: 1px solid transparent; 
}

来源

2012-09-28 01:07:29

猜你错过了我在W3C关于崩溃边缘的解释的帖子中的链接。 – j08691

好问题和很好的答案。 – Eric

@ j08691 - 如果你看看你原来的帖子的时间和附录的时间（带W3C的参考文献），你可以看到我在那个时候写了我的答案（是的，它花了我5分钟写我的答案B/C我张贴之前测试我的代码）。我在指责之前总是阅读彻底。为不方便的时间道歉。 –

检查这个fiddle

您需要float内div，使其工作

#inner {  
    margin:30px; 
    float:left; /* give float */ 
    width: 40px; 
    height: 40px; 
    background-color: black; 
}

否则给overflow:auto财产div#container。

检查这个fiddle

来源

2012-09-28 01:22:22

首先，#container有margin-top:0和#inner有margin-top:30px。这些元素的关系是父母和第一个孩子的关系。

如果没有边框，填充，内嵌的内容，或间隙分离块的边距，其第一子块的边距，或无边框，填充，内嵌的内容，高度，最小高度或最大高度，以将块的边缘底部与其最后一个孩子的边缘底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

保证金倒塌手段这些利润被组合成一个单独的边缘，其尺寸是最大的利润合并进去

这些规则适用的甚至是零边距，这样的利润率一个第一/最后一个孩子（根据上述规则）母公司的保证金是否是零

这就是为什么你恩其父之外结束卯起来用#container元素的外部施加，从小提琴30PX上边距：

30px and 0 top margins collapse

来源

2012-09-28 01:56:54

内部div的边际影响包含div的边际

HTML

CSS

小提琴

回答

相关问题