1. 程式人生 > >外邊距顯示不出來,黑人問號臉,原來是外邊距合併的鍋

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

如上圖所示,原本有問題的程式碼是這樣的,大家可以發現兩個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設定絕對定位 ,同樣可以達到正確結果。