html - 内部 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;
}

fiddle

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

我希望这会使一个小黑框在一个较大的红框中垂直和水平居中。相反，我得到一个黑框粘在红框的顶部，红框有边距顶部。

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

Answer 1

将overflow:auto添加到#container div。

jsFiddle example

或者

为 #container 格添加边框。

您可以在 W3C 阅读更多关于这种崩溃边距行为的信息。 .