帶邊距的HTML框模型

Question

HTML塊元素的框模型中有一些我無法理解的東西。

請看下面的jsFiddle：

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

有一個外部和一個內部<div> ，它們的左側，頂部，右側和底部都有相同的邊距。 外部<div>的邊距是透明的，所以我們看到彩色區域周圍的白色身體。 但是，內部<div>的邊距僅在左側和右側可見。 在我看來，橙色區域上方和下方應該有一個50px高度的紅色條。

為什么我錯了？

Answer 1

垂直邊距相互折疊 （根據一些相當復雜的規則，您可以在該鏈接的另一端找到），因此內邊距頂部占據外邊緣頂部的下半部分。

Answer 2

我認為這是關於保證金崩潰的。 http://reference.sitepoint.com/css/collapsingmargins有關於此的信息。

這是解決方法/解決方案。

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