2 margin重疊的情況和解決

2021-10-20 04:54:01 字數 820 閱讀 7492

什麼是margin重疊:

發生在(垂直相鄰邊界),即上下

結果的邊界寬度是相鄰邊界寬度中(最大的值)

邊界的重疊也有例外情況:

1、水平邊距永遠不會重合。

2、在規範文件中,2個或以上的塊級盒模型相鄰的垂直margin會重疊。最終的margin值計算方法如下:

a、全部都為正值,取最大者;

b、不全是正值,則都取絕對值,然後用正值減去最大值;

c、沒有正值,則都取絕對值,然後用0減去最大值。

意義:外邊距的重疊只產生在普通流文件上下外邊距之間,這個看起來有點奇怪的規則,其實有其現實意義。

設想,當我們上下排列一系列規則的塊級元素(如段落p)時,那麼塊元素之間因為外邊距重疊的存在,段落之間就不會產生雙倍的距離。

解決方法:

對於父子元素:

1、子層元素取消margin,用父元素的padding代替

2、內層元素透明邊框 border:1px solid transparent; //這是基於最上面說的(其間沒有任何非空內容、補白、邊框)原理實現。

對於兄弟元素:

1、設定兩個兄弟為兩個bfc區域

2、給其中乙個兄弟套上乙個div,設定border:1px solid white;也是用了(其間沒有任何非空內容、補白、邊框)原理實現。

上下元素margin重疊問題的解決辦法(一種情況)

問題描述 當兩個元素縱向存在,上面的元素設有 margin bottom,下面的元素設有 margin top 有時候我們就會遇到乙個奇怪的現象,那就是我們實際得到的兩個元素之間的間距並非是上面兩個值的和,而是其它值。具體情況 我們先編寫如下html 這是div1 這是div2 1 css div1...

電腦開機花屏的幾種情況和解決方法!

電腦的啟動順序,電源通電開機 主機板通電 cpu自檢 記憶體自檢 顯示卡自檢 載入bios資訊 輸入輸出裝置自檢 載入啟動 進入系統。一旦中間某個環節出現問題,電腦都會有相應的反饋!第二種 電腦的溫度太高 這種情況我們可以用安全軟體還有防毒軟體進行電腦清理和防毒。第三種 灰塵太多 灰塵無處不在,所以...

氧氣閥與低溫閥的使用情況和解決方法

劃重點,氧氣閥是怎麼工作和使用的?說到氧氣閥的時候,很多人會想到氧氣表,這經常會使用的氧氣閥,也稱為氧氣減壓閥。氧氣閥在物理化學實驗中經常用到,而且經常要用到氧氣,氮氣,氫氣,氬氣等氣體。以上所說的這些氣體,他們都會貯存在乙個高壓氣體鋼瓶中,當然,這個高壓氣體鋼瓶是專用的。在使用的過程中,通過減壓閥...