Неопознанный край, где встречаются две границы?

Question

я заметил при тестировании моей страницы на моем телефоне, что в точке, где две границ встречаются, неопознанный край появляется

Я также попытался, имеющим большое пограничное дно на моем h1 элемента и а 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>

Я отключил масштабирование с помощью <meta name="viewport" content="width=device-width, maximum-scale=2.0, user-scable=no"> в голове моей HTML.

Я также попытался увеличения границы дна моего h1 элемента на 1px и давая Nav уль элемент маржин-верх -1px который частично работает, однако этот вопрос будет по-прежнему появляются в резолюциях или различно ориентации.

Мне интересно, если кто-нибудь знает, почему это происходит и, надеюсь, решение.

Answer 1

Попробуйте использовать это, увидеть, если это то, что вам нужно: https://jsfiddle.net/1r7hp15c/3/

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>