轉載至：http://www.benben.cc/blog/?p=98

?

現象：
當兩個空的塊級元素嵌套時，如果內部的塊設置有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則是嚴格遵守規范的。

轉載于:https://www.cnblogs.com/pfzeng/p/3326738.html

總結

以上是生活随笔為你收集整理的margin-top绑架父节点问题的分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。