外邊距重疊
在css當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成乙個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。
摺疊結果遵循下列計算規則：
1.兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。也就是說當第乙個div的margin-bottom與第二個div的margin-top都為正數時，它們會自動合成乙個單獨的外邊距，取它們中間比較大的，此時的margin值為20，只要第二div的margin-top小於20，margin值就為20。
2.兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。也就是說當第乙個div的margin-bottom與第二個div的margin-top都為負數時，它們會自動合成乙個單獨的外邊距，取它們中間絕對值比較大的，此時的margin值為-20，只要第二div的margin-top絕對值小於20，margin值就為-20。
3.兩個外邊距一正一負時，摺疊結果是兩者的相加的和。也就是說當第乙個div的margin-bottom與第二個div的margin-top為一正數一負數時，它們會自動合成乙個單獨的外邊距，取它們
兩者的相加的和
，此時的margin值為30。
外邊距的重疊
垂直外邊距的重疊 相鄰的垂直方向外邊距發生重疊現象 兄弟元素 兄弟元素間的相鄰垂直外邊距會取二者之間的較大值 二者都是正值 特殊情況 如果相鄰的外邊距一正一負，則取兩者的和 如果相鄰的外邊距都是負值，則取兩者中絕對值較大的 兄弟元素之間的外邊距的重疊，對於開發是有利的，所以我們不需要處理 第一種情況...
垂直外邊距重疊問題
當兩個盒子 兄弟元素 處於垂直狀態時,相鄰兩個外邊距不是相加,而是取最大值 當兩個元素是父子關係時,子元素的外邊距 父元素的外邊距 會傳遞給對方 解決方法1 使用文字破壞外邊距相鄰 破壞相鄰狀態 缺點 需要增加html結構 解決方法2 使用border破壞外邊距相鄰 缺點 需要維持可見框大小 解決方...
外邊距重疊 css冷知識
外邊距重疊就是 margin collapse。相鄰的兩個盒子 可能是兄弟關係也可能是祖先關係 的外邊距可以結合成乙個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，結合而成的外邊距稱為摺疊外邊距 摺疊結果遵循下列計算規則 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值 兩個相鄰的外邊距都...