「每天進步一點點」CSS外邊距margin上下重疊現象研究

毗鄰的意思是什麼

先來看個簡單的例項：

①兄弟級別div之間

：建立2個相鄰div，上div的margin-bottom設定為50px，下div的margin-top設定為50px，最終效果會是什麼樣子的呢？有的同學或許認為兩個div的外邊距為100px（50+50）嘛，動手試試是這個結果嗎？

現象

實際結果是2個div的外邊距為50px。

②父子級div之間

：子div設定margin-top為50px，可實際結果

現象

明明設定的是子div外邊距為100px，可為什麼父子一塊移動了？

原因：所有毗鄰的兩個或者多個盒元素的margin會合併為一併共享之。毗鄰的意思是同級或巢狀的盒元素，並且他們之間沒有非空內容、padding或者border分隔。

結論：相鄰的“普通”元素，上下外邊距，並非簡單的相加，而是取其中較大的邊距值。如果出現負邊界，則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界，則從零中減去絕對值最大的負邊界。

注意結論中的普通，而對於float的元素則不存在此種情況。

問題出現了，那該如何解決呢？

①對於相鄰兄弟級的div：float浮動、inline-block。

②對於父子級的div：父加overflow:hidden或加padding或加border，子級加position:absolute。