CSS案例之margin外邊距合併問題

2021-10-01 06:18:29 字數 841 閱讀 7877

◆ margin外邊距合併問題原因:

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

◆ 父子元素margin合併問題:

在div裡面有子元素div1時,若父元素div在沒有設定overflow:hidden或者是border屬性,則父元素div的margin-top的值為父元素div和子元素div1中的margin-top的最大值。

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-lc0pogsk-1575449897131)(en-resource://database/5846:1)]

◆ 父子元素margin合併問題解決辦法:

◆ 兄弟元素margin合併問題:

當元素是兄弟元素時,在不設定float和position:absolute時,margin-bottom和margin-top會合併為兩者中的最大值。

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-pvmxpgth-1575449897133)(en-resource://database/5848:1)]

◆ 兄弟元素margin合併問題解決方法:

使兄弟元素不在同乙個bfc區域下,具體做法如:將兄弟元素分別觸發bfc或將兄弟元素包在不同的div下,這些不同的div再分別觸發bfc。參考[bfc概念及應用](%3ca href=「

理解CSS外邊距margin

margin是盒模型幾個屬性中乙個非常特殊的屬性。簡單舉幾個例子 只有margin不顯示當前元素背景,只有margin可以設定為負值,margin和寬高支援auto,以及margin具有非常奇怪的重疊特性。之前的博文中已經分別詳細地介紹了margin的基礎知識和負margin的詳細用法。本文將詳細介...

理解CSS外邊距margin

margin是盒模型幾個屬性中乙個非常特殊的屬性。簡單舉幾個例子 只有margin不顯示當前元素背景,只有margin可以設定為負值,margin和寬高支援auto,以及margin具有非常奇怪的重疊特性。之前的博文中已經分別詳細地介紹了margin的基礎知識和負margin的詳細用法。本文將詳細介...

理解CSS外邊距margin

margin是盒模型幾個屬性中乙個非常特殊的屬性。簡單舉幾個例子 只有margin不顯示當前元素背景,只有margin可以設定為負值,margin和寬高支援auto,以及margin具有非常奇怪的重疊特性。之前的博文中已經分別詳細地介紹了margin的基礎知識和負margin的詳細用法。本文將詳細介...