margin:20px;
margin:20px;
重疊：藍色的上20邊距與灰色背景div的20上邊距重疊；藍色方塊的下20畫素邊距與紅色方塊的上20畫素布局重疊；紅色方塊的20畫素的下邊距與灰色盒子的20畫素下邊距重疊。
由於ie瀏覽器和非ie瀏覽器兩大陣營對處理margin重疊問題上有較大差異，所以解決margin重疊問題一般是沒有什麼相容性的好方法的。一般而言，想這裡同向重疊異向重疊的情況同時出現還是比較少見的。在實際專案中遇到重疊只是一部分的重疊。重疊有利有弊，關鍵是你要了解什麼情況下會發生margin重疊，深刻理解它，這樣當你不希望發生重疊的時候可以避免出現重疊，希望利用這種重疊屬性的就利用它，正所謂，知己知彼，百戰百勝。
下面提出了些margin重疊的解決方案，但是這些方案都是有缺陷了，在ie瀏覽器和非ie瀏覽器下的表現是不一致的。這裡僅供參考，拓展思路和理解，您可以想想更加好的解決方法。我個人觀點認為最好的解決margin重疊的方法就是認識它，避免它！
margin:20px; float:left;
margin:20px; clear:both;
單個方塊重疊的解決方法：1.浮動。在ie瀏覽器下（ie8未測過），浮動可以解決margin-top以及margin-bottom重疊的問題。而在firefox火狐瀏覽器或是chrome谷歌瀏覽器下以及opera瀏覽器下，浮動只能解決同方向上的margin重疊問題。不同方向上的margin重疊的問題依舊存在。
margin:20px; 父標籤overflow:hidden; zoom:1;
margin:20px; 父標籤overflow:hidden; zoom:1;
同方向margin重疊的解決方法：1.與清除浮動的方法一致，給外部的box新增清除浮動相同的樣式即可。常用的樣式**為：overflow:hidden; zoom:1;但是有問題的是，在ie瀏覽器下（未測試ie8），應用zoom屬性後，似乎發生了水平方向上margin失效的情況。其他表現均一致。
margin:20px; 父標籤padding:1px;
margin:20px; 父標籤padding:1px;
同方向margin重疊的解決方法：2.增加些邊緣屬性。例如padding值，padding:1px;或是border屬性，border:1px solid #cacbcc。此方法在非ie瀏覽器下效果良好，但是在ie瀏覽器下，表現很糟糕。
CSS margin重疊現象
margin重疊現象 相鄰的普通元素，上下邊距，並不是簡單的相加，而是取其中較大的邊距值。1.水平邊距永遠不會重疊 2 在規範文件中，2個或以上的塊級盒模型相鄰的垂直margin會重疊。最終的margin值計算方法如下 a 全部都為正值，取最大者 b 不全是正值，則都取絕對值，然後用正值減去最大值 ...
CSS margin縱向重疊和負值問題
相鄰元素的margin top和margin bottom會發生重疊 空白內容的 也會重疊 如下 lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle p styl...
CSS margin合併問題
margin摺疊的產生有幾個條件 垂直方向上毗鄰的box不會發生摺疊的情況 摺疊邊距的計算 當兩個margin都是正值的時候，取兩者的最大值 當 margin 都是負值的時候，取的是其中絕對值較大的，然後，從 0 位置，負向位移 當有正有負的時候，先取出負 margin 中絕對值中最大的，然後，和正...