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

loyd3

已于 2022-07-28 14:39:23 修改

阅读量1.1k

点赞数 2

分类专栏：前端实用工具集

于 2022-07-28 14:35:56 首次发布

本文链接：https://blog.csdn.net/loyd3/article/details/126034425

版权

前端 css css3

前端实用工具集专栏收录该内容

20 篇文章 0 订阅

订阅专栏

出现的问题如下：
在这里插入图片描述

在某些移动设备尺寸下，两个相邻的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;
}

更改后的效果：
在这里插入图片描述