Navbar与Header背景图之间出现多余间隙的问题求助

我使用Flexbox实现Header背景图和导航栏，但两者之间出现了多余间隙，检查后未发现明显的padding或margin影响，希望得到解决方法。

HTML代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real Estate</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body style="background-color: #e3e3e3;">   
    <div class="headercontainer">
            <img src="images/manifestspace.png" style="width: 30vw; margin-bottom: 10vw;">
            <img src="images/welcomehome.png" style="width: 50vw; margin-bottom: 1vw;">
            <img src="images/buysell.png" style="width: 50vw;">
        
    </div>
    <main>
        <nav>
            <ul>
                <li><a href="#Owners">Owners</a></li>
                <!-- <li><a href="#Properties">Properties</a></li> -->
                <li><a href="#Property-Managers">Property-Managers</a></li>
                <li><a href="#Tenants">Tenants</a></li>
                <li><a href="#Maintanence">Maintanence</a></li>
            </ul>
        </nav>
    </main>
</body>
</html>

CSS代码 #

.headercontainer {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-image: url("https://static.wixstatic.com/media/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg/v1/fill/w_1215,h_810,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg");
  height: 35vw;
  background-repeat: repeat-x;
  background-size: cover;
  background-position: center;
  /* row-gap: 4vw; */
}
body {
  margin: 0;
}

nav ul {
  background-color: #181919;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: flex;
  padding: 15px;
  justify-content: space-evenly;
}
nav ul li a {
  text-decoration: none;
  color: white;
  padding: 0 10px;
}

解决方法 #

这个间隙来自浏览器对<main>标签的默认样式——大部分浏览器会给main元素添加默认的margin-top值，你已经重置了body的margin，但没处理main的默认边距。

只需在CSS中添加以下代码即可消除间隙：

main {
  margin: 0;
}

或者你也可以使用全局样式重置来统一清除所有元素的默认边距和内边距，避免类似问题：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Prashant Potluri