css子元素設置margin時和父元素合併margin

現象：
當兩個空的塊級元素嵌套時，如果內部的塊設置有margin-top屬性，而且父元素沒有下邊解決方法所述的特徵，那麼內部塊的margin-top屬性會綁架父元素（即將margin-top傳遞凌駕給了父元素）。
就好比一個小兵，看到上級有漏洞，就假傳聖旨，利用漏洞擴張自己的權利。只要設置父元素的border（柵欄）或者padding（隔離牆），就能管住這個調皮的下屬。

1 2 3

<div id="parrent"> <div id="box1"></div> </div>

1 2 3 4 5 6 7 8 9 10 11

#parrent{ width:500px; height:300px; background:teal; } #box1{ width:100px; height:100px; background:aqua; margin:20px; }

解決方法：
1、設置父元素或者自身的display:inline-block;
2、設置父元素的border:1px aqua solid;(>0)
3、設置父元素的padding:1px;(>0)
4、給父元素設置overflow:hidden;
5、給父元素或者自身設置position:absolute;
6、設置父元素非空，填充一定的內容。

這個現象並不是bug，而是有理論依據的：

《on having layout》
hasLayout 會影響一個盒子和其子孫的邊距重疊。根據規範，一個盒子如果沒有上補白和上邊框，那麼它的上邊距應該和其文檔流中的第一個孩子元素的上邊距重疊。

但值得一提的是，只有在FF和Chrome下才會出現這種margin-top綁架父節點的情況，在IE6 IE7中均顯示正常，但這恰恰說明了他們是不符合規範的，而FF合Chrome則是嚴格遵守規範的。