css系列--外边距塌陷

1.塌陷情况一

 .container1 {     
     background-color: #12c;      
     .item {  
         width: 80%;    
         height: 200px;           
         margin: 20px 10px;     
         background-color: aquamarine;     
         border: 1px solid red;      
     }
  }

显示结果:

问题: 父元素的高度没有被外边距撑起来,顶部的位置是留着的,但是不属于父元素的高度范围

修改:

.container2 {           
    background-color: #12c;       
    overflow: hidden;//增加的一行代码      
    .item {       
        width: 80%;      
        height: 200px;        
        margin: 20px 10px;      
        background-color: aquamarine;       
        border: 1px solid red;      
    }
}

显示结果:

父元素的高度被子元素的外边距撑起来了.其实,除了给父元素设置一个overflow:hidden;属性以外,还可以通过设置border解决.

2.想要两个子元素直接的外边距不被重叠

 .container3 {         
     background-color: #12c;      
     overflow: hidden;         
     .item {        
         width: 80%;       
         height: 200px;      
         margin: 20px 10px;         
         background-color: aquamarine;        
         border: 1px solid red;       
         display: inline-block;//增加部分     
     }
}

显示结果

这样的话子元素直接的外边距就没有折叠了

3.上述显示效果的另一种实现方式

.container5 {      
    padding-top: 20px;   
    overflow: hidden;      
    background-color: #12c;    
    .item {              
        width: 80%;            
        height: 200px;     
        margin-bottom: 40px;   
        background-color: aquamarine;     
        border: 1px solid red;       
     }            
    :last-child{        
        margin-bottom: 20px;     
    }
 }