我的导航栏中列表元素之间的一些奇怪的垂直空间不应该在那里

Question

正如您在屏幕中看到的那样，列表项之间有一些垂直空间，我知道如何删除所说的东西，我以前做过但似乎无法找到如何基于我的旧项目和互联网，是的，也许我只是愚蠢，如果我有答案 lmao 就很明显了。 提前感谢您的回答。

HTML:

<header>
    <nav>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Wiki</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Join the Team</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </nav>
</header>

样式表：

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    background-color: rgba(32,39,50,1.00);
    overflow: hidden;
}

li, a{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: white;
    text-decoration: none;
}

header{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
}
.nav-links{
    list-style: none;
}
.nav-links li{
    display: inline-block;
    padding: 20px 20px;
}
.nav-links li a{
    transition: all 0.3s ease 0s;
}
.nav-links li a:hover{
    color: rgba(224,88,255,1.00)
}

以为是 overflow:hidden，但这只是消除了我在右侧的一些溢出，这很好，但不是解决方案。 我只是扫描了一个小时通过一个旧项目，我在那里整理了它但没有发现它，感觉很愚蠢 rn.

Answer 1

内联元素之间有空格，除非在您的 HTML 中它们之间没有空格。有许多潜在的解决方案，但我最喜欢的是使用 flexbox。