如何消除div之间的差距

Question

我目前有两个div，它们的边距和填充都设置为零，主体的边距和衬垫也设置为0。

这是我的代码：

body{
margin: 0;
padding: 0;
}
.navbar--darkmode {
display: flex;
gap: var(--gap, 1rem);
padding: 1.5em;
background-color: #152028;
}
.navbar--darkmode>.logo {
display: inline;
margin-block: auto;
margin: 0;
padding: 0;
font-family: 'Fira Mono', monospace;
font-weight: 500;
font-size: larger;
color: white;
}
.nav-link--darkmode {
color: white;
text-decoration: inherit;
font-family: 'Fira Mono', monospace;
margin-right: 1em;
}
.primary-navigation {
list-style: none;
padding: 0;
margin: 0;
}
.primary-navigation>li {
display: inline;
}
.primary-header {
align-items: center;
justify-content: space-between;
margin-bottom: 0;
position: relative;
}
.page {
margin: 0;
padding: 0;
position: fixed;
}
.page--darkmode {
margin: 0;
padding: 0;
width: auto;
height: 100vh;
background-color: #282434;
}

<div class="primary-header navbar--darkmode">
<h1 class="logo">NAME GOES HERE</h1>
<nav>
<ul class="primary-navigation">
<li>
<a class="nav-link--darkmode" href="/">Home</a>
</li>
<li>
<a class="nav-link--darkmode" href="/about">About</a>
</li>
<li>
<a class="nav-link--darkmode" href="/projects">Projects</a>
</li>
<li>
<button></button>
</li>
</ul>
</nav>
</div>
<div class="page--darkmode">
<h1>hi</h1>
</div>

我不太确定是什么导致了这个间隙，因为当我检查元素时，没有任何东西会导致这个间隙，所以我是遗漏了什么，还是有一个元素在强行创建一条我不知道的新线？谢谢

编辑：修正css，使其更精确到css文件我有

Answer 1

H1元素正在向下推.page--darkmodediv。CSS边距的一个有趣之处是，孩子们可以像那样推着父母。

修复它可以像将H1上的边距归零一样简单。在下面的片段中，我添加了一条规则来实现这一点。

body{
margin: 0;
padding: 0;
}
.navbar--darkmode {
display: flex;
gap: var(--gap, 1rem);
padding: 1.5em;
background-color: #152028;
}
.navbar--darkmode>.logo {
display: inline;
margin-block: auto;
margin: 0;
padding: 0;
font-family: 'Fira Mono', monospace;
font-weight: 500;
font-size: larger;
color: white;
}
.nav-link--darkmode {
color: white;
text-decoration: inherit;
font-family: 'Fira Mono', monospace;
margin-right: 1em;
}
.primary-navigation {
list-style: none;
padding: 0;
margin: 0;
}
.primary-navigation>li {
display: inline;
}
.primary-header {
align-items: center;
justify-content: space-between;
margin-bottom: 0;
position: relative;
}
.page {
margin: 0;
padding: 0;
position: fixed;
}
.page--darkmode {
margin: 0;
padding: 0;
width: auto;
height: 100vh;
background-color: #282434;
}
.page--darkmode h1{
margin-top:0px;
}

<div class="primary-header navbar--darkmode">
<h1 class="logo">NAME GOES HERE</h1>
<nav>
<ul class="primary-navigation">
<li>
<a class="nav-link--darkmode" href="/">Home</a>
</li>
<li>
<a class="nav-link--darkmode" href="/about">About</a>
</li>
<li>
<a class="nav-link--darkmode" href="/projects">Projects</a>
</li>
<li>
<button></button>
</li>
</ul>
</nav>
</div>
<div class="page--darkmode">
<h1>hi</h1>
</div>