内部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到#containerdiv.

jsFiddle例子

要么

为#containerdiv 添加边框.

您可以在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;
}