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

Question

我在一个包含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认为它在做什么吗？

Answer 1

将overflow:auto添加到#container div。

<强> jsFiddle example

或者

为#container div添加边框。

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

Answer 2

虽然提供的解决方案是可行的，但没有人解释这个问题。它被称为边缘折叠，在几种情况下都会发生。

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

Answer 3

方法1

对于内部div，

position:absolute，因此知道 来自

的30px边距

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

<小时/> 方法2

内部div的

display:inline-block

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

---

方法3

border:solid 0 transparent到外部分组

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

选择：）

Answer 4

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

  

如果没有边框，填充，内联内容或间隙   将块的边缘顶部与其第一个边缘顶部分开   子块，或没有边框，填充，内联内容，高度，   min-height或max-height分隔块的边距底部   在最后一个孩子的边缘底部，那些边缘崩溃了。   折叠的保证金最终在父母之外。

保证金折叠意味着这些保证金合并为一个保证金，其大小是合并到其中的最大保证金

  

这些规则甚至适用于零的边距，因此a的边距   第一个/最后一个孩子在其父母之外结束（根据规则   以上）父母的保证金是否为零

这就是为什么你最终在#container元素之外应用了30px的上边距，来自你的小提琴：

Answer 5

检查此fiddle

您需要float内部div才能使其正常工作

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

或者将overflow:auto属性提供给div#container。

检查此fiddle