css的盒子模型里是這樣規定兩個對象之間的距離的：對象之間的間距是由兩個對象的盒子模型的最終計算值得出來的，也就是說兩個對象之間的間距就是兩個對象的距離，但是當遇到兩個對象一個有下外邊距margin，一個有下外邊距margin，這個問題變得有點復雜。我們來看看。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Margin上下邊距重疊問題</title> <style> #one{width:200px;height:100px;background-color:#ff0000;margin:10px;} #two{width:200px;height:100px;background-color:#00ff00;margin:10px;} </style> </head> <body> <div id="one"></div> <div id="two"></div> </body> </html>
如果你認為one和two盒子的距離是20px，那你就錯了，它們的真正距離是10px。
這是css的一個特性，當空白邊疊加時，以較大的margin值為准。這在html和xhtml中都是一樣的情況。
但如果把上例中的one和two盒子都進行float，那情況又不同了，如：
<style> #one{width:200px;height:100px;background-color:#ff0000;margin:10px;float:left;} #two{width:200px;height:100px;background-color:#00ff00;margin:10px;float:left;clear:both;} </style>
這時one與two盒子之間的上下距離變成了20px，這就是說當兩個對象都浮動的情況下就不再遵守空白邊疊加的規則了。