問題描述: 兩個(gè)塊級元素的上外邊距和下外邊距可能會(huì)合并(折疊)為一個(gè)外邊距,其大小會(huì)取其中外邊距值大的那個(gè),這種行為就是外邊距折疊。需要注意的是,浮動(dòng)的元素和絕對定位這種脫離文檔流的元素的外邊距不會(huì)折疊。重疊只會(huì)出現(xiàn)在垂直方向。
計(jì)算原則: 折疊合并后外邊距的計(jì)算原則如下:
如果兩者都是正數(shù),那么就去最大者如果是一正一負(fù),就會(huì)正值減去負(fù)值的絕對值兩個(gè)都是負(fù)值時(shí),用0減去兩個(gè)中絕對值大的那個(gè)
解決辦法: 對于折疊的情況,主要有兩種:兄弟之間重疊和父子之間重疊
1、兄弟之間重疊
底部元素變?yōu)樾袃?nèi)盒子:display: inline-block底部元素設(shè)置浮動(dòng):float底部元素的position的值為absolute/fixed
2、父子之間重疊
父元素加入:overflow: hidden父元素添加透明邊框:border:1px solid transparent子元素變?yōu)樾袃?nèi)盒子:display: inline-block子元素加入浮動(dòng)屬性或定位