line-height

line-height代表行高

蓝色背景部分为行高

line-height：2em

相邻兄弟元素margin重叠

蓝色与蓝色之间的白色部分为

margin-bottom：1em；

margin-top：1em；

因为发生了margin-top与margin-bottom重叠

所以只有1em的留白

 

                  
                                                      
第一行
            
第二行
      

父类元素与子元素margin重叠    

条件  

1. 父类元素没有设置border-top值
2. 父类元素没有设置padding-top值

 

子元素设置margin-top等于20px

 

父类元素设置margin-top等于20px

 

 

父类元素与子元素同时设置margin-top等于20px， 

 

此时父类元素的margin-top与子元素margin-top发生重叠

                  
                                                       
       
                  
        
                                 my name is son                  
        
            
       
      

当第一行的margin-bottom等于50px，

第二行的margin-top等于30px，

这时它们两个之间的间距取较大值50px

当一个值为正数，一个为负值时，

间距取它们两个值的和

当两个值都为负值，取它们其中绝对值较大的负值。

 

                  
                                                        
第一行
            
第二行