上下元素margin重叠问题的解决办法（一种情况）

问题描述：

当两个元素纵向存在，上面的元素设有margin-bottom,下面的元素设有margin-top,有时候我们就会遇到一个奇怪的现象，那就是我们实际得到的两个元素之间的间距并非是上面两个值的和，而是其它值。

 

具体情况：

我们先编写如下HTML代码：

<divid="div1">

这是div1

</div>

<divid="div2">

<divid="div2-1">

这是div2-1

</div>

</div>

 

CSS代码：

* {

margin:0;

padding:0;

box-sizing:border-box;

}

#div1, #div2-1 {

width:100%;

height:100px;

border:none;

background-color:#ba68c8;

line-height:100px;

text-align:center;

color:white;

}

#div1 {

margin-bottom:50px;

}

#div2-1 {

margin-top:100px;

background-color:#64b5f6;

}

#div2 {

border:none;

}

 

效果如下：

 

 

分析：

按理说，我们对div1设置了margin-bottom:50px;对div2-1设置了margin-top: 100px;那么，我们得到两个元素的中间间距应该是150px才对，但是实际效果如上图所示，两个元素之间的间距为100px。原因在于div1的margin-bottom的参照元素是div2-1，而div2-1的margin-top的参照元素恰好是div1，这就导致了它俩之间的间距就会以两值中最大的那个为实际效果。这个现象其实和我们生活中很多场景很像，仔细想想应该不难理解。

 

解决办法：给它们俩之间一个另外的参照，这里给div2加个边（黑色）。

CSS代码：

#div2 {

border:1px solid;

}

 

改后的效果如下：

 

这样我们就得到了我们想要的效果。当然，这个问题还会有其它的变形情况，需要我们举一反三。