外邊距合併，對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上邊距會與子元素的上邊距合併，合併後的外邊距取兩者中的較大者。即使父元素的上外邊距為0，也會發生合併。
即為當父盒子裡的子盒子給它乙個margin值時，子盒子的移動會影響父盒子一起移動：
這裡當子盒子給了margin-top: 20px時，沒有達到預想效果，使得與父盒子分離並距離20px。
解決方法：
一、給父盒子加上overflow: hidden;
二、給父盒子加padding: 1px;目的是讓子盒子能順利掉下來，當然這是需要內邊距時再使用；
三、給父盒子加border: 1px solid #ccc;目的跟二一樣是為了撐大盒子，使子盒子順利與父盒子分隔，當然這是需要邊框時再使用。
綜上建議使用第一種方法。
效果如圖：
就順利與父盒子分隔開來了。
盒子外邊距合併問題
兩個div盒子一排 第乙個margin bottom為正 20px 第二個margin top 為正 20px 兩個盒子的外邊距會合併 為10px 也就是說兩個盒子自身的外邊距是盒子自身的一半 負數也是一半值是負數 兩個數值和為零會合拼 安照上面所述 一正一負數值是一樣會鏈結在一起 比如上20px ...
盒子外邊距
margin 10px 乙個值 上下左右 margin 10px 20px 二個值 上下 左右 margin 10px 20px 30px 三個值 上 左 右 下 margin 10px 20px 30px 40px 四個值 上 下 左 右 初始化網頁元素 網頁中所有的元素的內外邊距都為0 盒子水平...
關於外邊距合併問題
2 margin相鄰摺疊問題 在開發中，我們偶爾會遇到明明兩個div都設定了margin，可是它們之間的距離就是不等於兩個div的margin之間的和，這是為什麼呢？其實是因為在某些情況下，兩個或多個塊元素的相鄰邊界 其間沒有任何非空內容 padding 邊框 會發生合併成單一邊界，也就是標題說的摺...