垂直外邊距的重疊:
相鄰的垂直方向的外邊距會發生重疊現象
兄弟元素:
兄弟元素之間的相鄰垂直方向的外邊距會取兩者之間的最大值
特殊情況:
一正一負,取兩者和
都為負,取絕對值最大的一邊
父子元素:
父子元素間的相鄰外邊距,子元素的會傳遞給父元素(上外邊距)
父子元素的外邊距的重疊會影響頁面的布局,需要進行處理
解決方案:
1.不使用外邊距,採取
在父元素中,使用內邊距padding-left,然後減高度
2.給父元素新增上邊框,使得父子邊距不重疊(高度應減去邊框寬度)
前提：要保證盒子的大小不變
demo:
"boxout">
"boxinner">
CSS之外邊距摺疊
collapsing margins，即外邊距摺疊，指的是毗鄰的兩個或多個外邊距 margin 會合併成乙個外邊距。其中所說的 margin 毗鄰，可以歸結為以下兩點 兩個或多個 說明其數量必須是大於乙個，又說明，摺疊是元素與元素間相互的行為，不存在 a 和 b 摺疊，b 沒有和 a 摺疊的現象。毗...
外邊距重疊
外邊距重疊 在css當中，相鄰的兩個盒子 可能是兄弟關係也可能是祖先關係 的外邊距可以結合成乙個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。摺疊結果遵循下列計算規則 1.兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。也就是說當第乙個div的ma...
垂直外邊距重疊問題
當兩個盒子 兄弟元素 處於垂直狀態時,相鄰兩個外邊距不是相加,而是取最大值 當兩個元素是父子關係時,子元素的外邊距 父元素的外邊距 會傳遞給對方 解決方法1 使用文字破壞外邊距相鄰 破壞相鄰狀態 缺點 需要增加html結構 解決方法2 使用border破壞外邊距相鄰 缺點 需要維持可見框大小 解決方...