margin 外邊距合併問題

1、兄弟元素的外邊距合併

效果圖以下：（兩者之間的間距爲100px，不是150px）

2、嵌套元素的外邊距合併

對於兩個嵌套關係的元素，若是父元素中沒有內容或者內容在子元素的後面而且沒有上內邊距及邊框，則父元素的上邊距會與子元素的上外邊距發生合併，且值爲最大的那個上外邊距，同時該值做爲父元素的上外邊距。即便父元素的上外邊距爲0，也會發生合併。(只有垂直方向纔會發生塌陷）

解決方法：

　　1. 爲父元素定義1像素的上邊框。

　　2. 爲父元素定義1像素的上內邊距。

　　3. 爲父元素添加overflow:hidden;

　　注意，第一種和第二種方法都很差，會撐大盒子的體積。第三種方法將溢出內容隱藏，既不增大盒子體積，也不影響內容。