两个边界相遇的身份不明的边缘？

Question

我注意到在手机上测试我的页面时，两个边框相遇的点，出现了一个不明边缘

我还尝试在 h1 元素上设置较大的边框底部，并为 nav ul 元素设置0边框顶部

看看如果身体的背景颜色与边框颜色相同会发生什么

在使用Google Chromes响应式开发人员工具进行测试时，也会出现此问题。

这是我的问题代码

body {
    width: 100%;
    background-color: blue;
}

h1 {
    font-size: 35px;
    text-align: center;
    color: yellow;
    background-color: blue;
    border:20px solid yellow;
    border-bottom: 10px solid yellow;
    margin: 2%;
    margin-bottom: 0px;
    padding-top: 10px;
   padding-bottom: 10px;
}

nav ul {
    background-color: blue;
    display: flex;
    justify-content: space-between;
    list-style-position: inside;
    padding: 0;
    margin: 0;
    border:20px solid yellow;
    border-top: 10px solid yellow;
    margin-left: 2%;
    margin-right: 2%;
}

nav li {
    font-size: 15px;
    display: inline-block;
    list-style-type: none;
    background-color: blue;
    color: yellow;
    padding: 10px;
}

nav ul li a {
    width: 67px;
    display: inline-block;
    text-align: center;
    color: yellow;
    text-decoration: none;
}

<header>
    <h1>
        SPACING
    </h1>
</header>
<nav>
    <ul>
        <li><a href="#">MARGIN</a></li>
        <li><a href="#">BORDER</a></li>
        <li><a href="#">PADDING</a></li>
    </ul>
</nav>

我在html的头部使用<meta name="viewport" content="width=device-width, maximum-scale=2.0, user-scable=no">禁用了缩放。

我还尝试将 h1 元素的border-bottom增加1px，并将 nav ul 元素赋予-1px的margin-top部分工作，但是此问题仍将以不同的分辨率或方向显示。

我想知道是否有人知道为什么会发生这种情况并希望能够成为解决方案。

Answer 1

尝试使用此功能，看看您是否需要： value

CSS：

body {
width: 100%;
background-color: blue;
}

h1 {
font-size: 35px;
text-align: center;
color: yellow;
background-color: blue;

margin: 2%;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 10px;
}

 nav ul {

display: flex;
justify-content: space-between;

padding: 0;
margin: 0;

margin-left: 2%;
margin-right: 2%;
background:blue;
}

nav li {
font-size: 15px;
display: inline-block;
list-style-type: none;
background-color: blue;
color: yellow;
padding: 10px;
}

nav ul li a {
width: 67px;
display: inline-block;
text-align: center;
color: yellow;
text-decoration: none;
}
div{
padding: 20px;
background: yellow;
}
nav{
padding: 20px;
background: yellow;
margin-top: -1px;
 }

HTML：

    <header>
<div>
    <h1>
        SPACING
    </h1>
 </div>   
</header>
<nav>
    <ul>
        <li><a href="#">MARGIN</a></li>
        <li><a href="#">BORDER</a></li>
        <li><a href="#">PADDING</a></li>
    </ul>
</nav>