margin邊距碰撞

記得以前在看《CSS實踐手冊》的時候，看到過“邊距碰撞”這樣的例子與解釋。自己大概記得是這樣說的： 

當兩個具有margin-top或margin-bittom的塊元素垂直排列在一個父類的塊元素裡面的時候，邊距的算法在不同的浏覽器是算法略有不同。在IE6中，一般都是取margin比較小一個作為兩個塊元素的margin。解決辦法就是用padding替代margin。

我以自己不會遇到這樣的情況，沒想到今天在寫頁面的時候，自己測試浏覽器時發現Maxthon出現了這樣的問題。其它的都沒有這樣的現象，邊ie6都沒有。真郁悶死我了。一開始自己還沒有想到是邊距碰撞的問題，自己就加上背景色來調試。調試了好久都有效果。後來才想到邊距的問題。下面是下精簡版，好讓自己在以定頁面的時候能快速的解決類似的問題。

xhtml代碼：

 
 <div id="hotelFram">        
      
         <div class="hotelCate">        
      
             <div class="FeaturedHotels" id="InternationalHotel">        
      
                 <p class="p1">1這裡是垂直下來的第一個div，叫作InternationalHotel！底部有一個屬性是:margin-bottom:10px;</p>        
      
                 <p class="p2">2</p>        
      
                 <p class="p3">3</p>        
      
                 <p class="p4">4</p>        
      
                 <p class="p5">5</p>        
      
             </div>        
          
             <div class="FeaturedHotels" id="DomesticHotels">        
      
                 <p class="p6">6這裡是垂直下來的第二個div，叫作DomesticHotels！底部有一個屬性是:margin-bottom:10px;</p>        
      
                 <p class="p7">7</p>        
      
                 <p class="p8">8</p>        
      
             </div>        
      
         </div>        
      
         <div class="hotelAd">        
      
             <p>這裡主要是廣告、雜七雜八的</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
         </div>        
          
     </div>        
          
     <div id="ShareNews">        
      
         <div class="shareFrame floatLeft">        
      
             <p class="p9">9這裡是shareFram,向左浮動的！目的是讓兩個DIV能在同一列顯示</p>        
      
             <p class="p10">10</p>        
      
             <p class="p11">11</p>        
      
             <p class="p12">12</p>        
      
         </div>        
      
         <div class="newsFrame floatRight">        
      
             <p class="p13">13這裡是newsFrame,向右浮動的！目的是讓兩個DIV能在同一列顯示</p>        
      
             <p class="p14">14</p>        
      
             <p class="p15">15</p>        
      
             <p class="p16">16</p>        
      
         </div>        
      
     </div>        
     
    

css代碼：

 
 *{ margin:0px; padding:0px; font-size:12px; }         
      
 .floatRight { float:right; }         
      
 .floatLeft {float:left; }         
      
 #hotelFram { width:990px; margin:10px auto 0px; overflow:hidden; background:#999; }         
      
     .hotelCate { width:770px; float:left; overflow:auto; }         
      
     .hotelAd { width:200px; float:right; background:#F9C; }         
      
     .FeaturedHotels { float:left; width:770px; margin-bottom:10px; overflow:hidden; }         
      
 #ShareNews { width:990px; margin:0px auto; overflow:hidden; background:#CCC; }         
      
     .shareFrame { width:590px; overflow:hidden; background:#930; }         
      
     .newsFrame { width:390px; overflow:hidden; background:#FF0; }         
      
 #InternationalHotel { background:#0F0; }         
      
 #DomesticHotels { background:#0F0; }         
      
 .p1 { background:#90F; }         
      
 .p2 { background:#96F; }         
      
 .p3 { background:#99F; }         
      
 .p4 { background:#9CF; }         
      
 .p5 { background:#9FF; }         
      
 .p6 { background:#C0F; }         
      
 .p7 { background:#C6F; }         
      
 .p8 { background:#C9F; }         
      
 .p9 { background:#CCF; }         
      
 .p10 { background:#CFF; }         
      
 .p11 { background:#F0F; }         
      
 .p12 { background:#F6F; }         
      
 .p13 { background:#F9F; }         
      
 .p14 { background:#FCF; }         
      
 .p15 { background:#FFF; }         
      
 .p16 { background:#33C; }        
     
    

出現的效果大緻如下：

FF效果

IE效果：

Maxthon效果：

解決辦法就是将margin-bottom:10px; 換成padding-bottom:10px;搞定！