margin重叠问题

版权声明：内容多为自言自语，请自行判断有无价值。 https://blog.csdn.net/weixin_41702247/article/details/84232183

相邻垂直元素

<div class='a'>a</div>
<div class='b'>b</div>

.a{
    width:100px;
    height:100px;
    background-color: #ccc;
    margin-bottom:30px;
}
.b{
    width:100px;
    height:100px;
    background-color: #ddd;
    margin-top:50px;
    
    /* 以下三种方式都可以防止margin重叠 */
    /* position: absolute; */
    /* display:inline-block; */
    /* float:left; */
}

 

相邻&嵌套元素 

<div class="a">
    宽高100，底外距50
</div>
<div class="c">
    <div class="d">宽高100，上外距20</div>
</div>

.a{
    width:100px; 
    height:100px;
    margin-bottom:50px;
    background-color: #ddd;
}
.c{
    width:150px;
    height:150px;
    background-color: #aaa;
    margin-top:20px;
/*     以下三种任一都可解决c标签外margin重叠、内部d标签margin消失问题 */
/*     position:absolute; */
/*     float:left; */
/*     display:inline-block; */
    
/*     以下三种任一仅可解决d标签margin消失问题 */
/*     overflow:hidden; */
/*     padding-top:1px; */
/*     border:1px solid transparent; */
}
.d{
    width:100px;
    height:100px;
    background-color: #ddd;
    margin-top:20px;
    
/*    以下三种仅可解决d标签自身margin消失问题  */
/*     position:absolute; */
/*     float:left; */
/*     display:inline-block; */
}

当div.c标签无内容时：d标签的上边距消失了

div.c有内容时：d标签上边距显示

 

结论： 

当有div嵌套，且外层div无内容，此时内层div的margin会消失，解决办法有6种：

     1.外层c标签：

               overflow:hidden;
               padding-top:1px;
               border:1px solid transparent;

      2.内层d标签

               position:absolute;
               float:left;
               display:inline-block;

 最为通用的解决div外部margin被较大值覆盖、或内部div的margin消失问题，方法有三种：

    position:absolute;
    float:left;
    display:inline-block;