带边距的HTML框模型

Question

HTML块元素的盒子模型中有些东西我无法理解。

请看下面的jsFiddle：

http://jsfiddle.net/5b7X2/1/

有一个外部和一个内部<div>，它们的左侧，顶部，右侧和底部都有相同的边距。外<div>的边缘是透明的，所以我们看到彩色区域周围的白色身体。但是，内部<div>的边距仅在左侧和右侧可见。在我看来，橙色区域上方和下方应该有一个50px高度的红色条。

为什么我错了？

Answer 1

相互垂直margins collapse（根据一些相当复杂的规则，您可以在该链接的另一端找到），因此内边距顶部占据外边缘的下半部分。 / p>

Answer 2

我认为这是关于保证金崩溃的问题。 http://reference.sitepoint.com/css/collapsingmargins有关于此的信息。

这是解决方案/解决方案。

<div id="outer">
    &nbsp;
    <div id="inner">
        Text
    </div>
    &nbsp;
</div>