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