【前端样式】h5页面移动端上下两个相邻的div中间出现缝隙

出现的问题如下：

在某些移动设备尺寸下，两个相邻的div中间出现一条白线

上半部分div的样式

.header-section {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: calc(0px + 11px);
    z-index: 200;
    background: #000000;
}

下半部分div的样式

.page-wapper {
    width: 100%;
}

可以通过给上半部分div的样式 添加 margin-bottom: -1px;来解决

解决后的样式如下：

.header-section {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -1px;
    padding-top: calc(0px + 11px);
    z-index: 200;
    background: #000000;
}

更改后的效果：