[CSS]解決父子元素margin-top重疊問題

問題代碼：

   
   
   
           

    
    
    
            
<div id="father" style="background:#eee;">
    
    
    
            
 <div id="son" style="margin-top:50px;">son</div>
    
    
    
            
</div>
   
   
   
           

方法一：

父元素設置overflow:hidden

   
   
   
           

    
    
    
            
<div id="father" style="background:#eee;overflow:hidden;">
    
    
    
            
 <div id="son" style="margin-top:50px;">son</div>
    
    
    
            
</div>
   
   
   
           

方法二：

父元素設置border-top

    
    
    
            

     
     
     
             
<div id="father" style="background:#eee;border-top:1px solid transparent;">
     
     
     
             
 <div id="son" style="margin-top:50px;">son</div>
     
     
     
             
</div>
    
    
    
            

方法三：

父元素設置padding-top

    
    
    
            

     
     
     
             
<div id="father" style="background:#eee;padding-top:1px;">
     
     
     
             
 <div id="son" style="margin-top:50px;">son</div>
     
     
     
             
</div>
    
    
    
            

方法四：

父子元素間增加一個inline元素

    
    
    
            

     
     
     
             
<div id="father" style="background:#eee;">&nbsp;
     
     
     
             
 <div id="son" style="margin-top:50px;">son</div>
     
     
     
             
</div>