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