外邊距顯示不出來，黑人問號臉，原來是外邊距合併的鍋

摘要： 如上圖所示，原本有問題的程式碼是這樣的，大家可以發現兩個div都有各自的外邊距，一個15px,一個30px,按理說內部的這個text名的div外邊距應該是15+30,45px才對，但是結果與預想值有偏差，兩個div的上外邊距重疊在一起了，百思不得起解，檢查了程式碼，發現外邊距設定的都...

如上圖所示，原本有問題的程式碼是這樣的，大家可以發現兩個div都有各自的外邊距，一個15px,一個30px,按理說內部的這個text名的div外邊距應該是15+30,45px才對，但是結果與預想值有偏差，兩個div的上外邊距重疊在一起了，百思不得起解，檢查了程式碼，發現外邊距設定的都沒問題，可是就是不正確，通過百度一番才知道，原來是外邊距合併的鍋；（知識連結：http://www.w3school.com.cn/css/css_margin_collapsing.asp）

看到這裡，大家應該知道原因了，是因為沒有給第一個div設定邊框，導致兩個外邊距合併。

註釋：請注意，如果不設定 div 的內邊距和邊框，那麼內部 div 的上外邊距將與外部 div 的上外邊距合併（疊加）。

所以，我給外部div設定邊框之後,達到我預期的結果。如下圖：兩個div的外邊距都能夠正確顯示出來。

敲重點！！！ 只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並

本問題的另一種解決方法，就是給外部div設定絕對定位 ,同樣可以達到正確結果。