這是一個經(jīng)典的問題 ? ? ? “垂直外邊距疊加”
? ? ? ? ? ? 塊的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距弃锐，其大小是組合到其中的最大外邊距粪躬，這種行為稱為外邊距塌陷(margin collapsing)担败，有的地方翻譯為外邊距合并。
發(fā)生外邊距塌陷的三種基本情況:
相鄰的兄弟姐妹元素
? ? ? ? ? ? ? ?毗鄰的兩個兄弟元素之間的外邊距會塌陷（除非后者兄弟姐妹需要清除過去的浮動）镰官。例如：
這個段落的下外邊距被合并......這個段落的上外邊距被合并提前。
可以發(fā)現(xiàn)這兩個段落中間的距離，不是 ”上面段落的下邊距“ 與 ”下面段落的上邊距“ 的 求和 泳唠，而是兩者中的較大者（在此示例中為30px）狈网。
塊級父元素與其第一個/最后一個子元素
? ? ? ? ? ? ? ? ? ?如果塊級父元素中，不存在上邊框笨腥、上內(nèi)補拓哺、inline content、清除浮動這四條屬性（對于上邊框和上內(nèi)補脖母，也可以說士鸥，當上邊距及上內(nèi)補寬度為0時），那么這個塊級元素和其第一個子元素的上邊距就可以說”挨到了一起“谆级。此時這個塊級父元素和其第一個子元素就會發(fā)生 上外邊距合并 現(xiàn)象烤礁，換句話說，此時這個父元素對外展現(xiàn)出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者肥照。
? ? ? ? ? ? ? ? ? ?類似的脚仔，若塊級父元素的margin-bottom與它的最后一個子元素的margin-bottom之間沒有父元素的border、padding舆绎、inline content玻侥、height、min-height亿蒸、max-height分隔時凑兰，就會發(fā)生 下外邊距合并 現(xiàn)象。
空塊元素
? ? ? ? ? ? ? ? ? ?如果存在一個空的塊級元素边锁，其border姑食、padding、inline content茅坛、height音半、min-height都不存在则拷。那么此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合并曹鸠。例如：
這個段落的和下面段落的距離將為20px這個段落的和上面段落的距離將為20px煌茬，當以上情形同時出現(xiàn)時，外邊距合并會更加復雜（會比較兩個以上外邊距來最終計算出真實的邊距值）彻桃。
即使外邊距為0坛善，這些規(guī)則也仍舊生效。因此邻眷，無論父元素的外邊距是否為0眠屎，第一個或者最后一個子元素的外邊距會被父元素的外邊距"截斷"(根據(jù)上面的規(guī)則)，在負外邊距的情況下肆饶，合并后的外邊距為最大正外邊距與最小負外邊距之和改衩。
當有負邊距存在時，合并后的外邊距將是最大正邊距加上最小負邊距（即負邊距中絕對值最大的一個）驯镊。
如兩個兄弟元素葫督，上面的元素的下邊距為 20px ，下面的元素的上邊距為 -20px 板惑，那么發(fā)生外邊距合并后候衍，這兩個元素的實際距離將變成 0px?。
