最近工作有遇到过这个问题，（其实以前也遇到过，不过以前遇到直接重构代码，现在想想好不值得）。
ps: 网上有很多解决方案，但无异于以下几种：
1.外层padding
2.透明边框border:1pxsolidtransparent;
3.绝对定位postion:absolute:
4.外层DIVoverflow:hidden;
5.内层DIV 加float:left;display:inline;
6.外层DIV有时会用到zoom:1;
（看来看去都是这些方法，没人提到有display: flex所致的）
问题重现：
image.png
wxss代码：
.aaa {
width:690rpx;
height:240rpx;
display:flex;
flex-direction:row;
align-items:center;
box-sizing:border-box;
justify-content:space-between;
border-radius:30rpx;
background-color:#fff;
padding:39rpx;
margin:20rpx 0;
}
其中我们只要看margin: 20rpx 0跟待会讲到的display: flex这两句就好了。
每个item都有一个上下为20rpx的间距，但现在他们重叠了。我试着把display: flex改为display: block，发现问题一致，然后，我再试着把它改为display: inline-block，发现间距就不重叠了，问题得以解决。因此就类比到display: inline-flex上，看名字盲猜都知道是inline-block一类东西，果然设置inline-flex问题完美解决。😊
只需改一句：
display:inline-flex;
他们就隔开了
image.png
都看到这里了，再分享一个更简单实用的方法，在两两div之间插入一个新的div，设置高度1px即可。
<div>我是有margin重叠问题的div1</div>
<div style="height: 1px"></div>
<div>我是有margin重叠问题的div2</div>
