帶邊距的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>