带边距的HTML框模型

Question

框模型中有一些我无法理解的HTML块元素。

请看看以下的jsfiddle：

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

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

为什么我错了？

Answer 1

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

Answer 2

我认为这是关于边缘崩溃。 http://reference.sitepoint.com/css/collapsingmargins有关于此的信息。

这是一个解决方法/解决方案。

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