导航栏列表项间存在异常垂直间距，求解决方法

如截图所示，我的导航栏列表项之间存在一些垂直间距，不知道如何消除。之前解决过这个问题，但现在参考旧项目和网络资料都找不到方法。我原以为是overflow:hidden导致的，但它只消除了右侧的溢出问题，并非当前问题的解决方案。已经花了一个小时查看之前解决过该问题的旧项目，仍未找到原因。

我的代码 #

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>

CSS代码 #

*{
    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)
}

问题原因及解决方案 #

原因分析 #

1. inline-block元素的默认空白：当li设置为display:inline-block时，HTML代码里列表项之间的换行、空格会被浏览器渲染成空白间距，这是垂直额外空间的来源之一。
2. li的上下内边距：你给.nav-links li设置了padding:20px 20px，其中上下各20px的内边距直接拉高了列表项的垂直高度，加重了间距问题。

解决步骤 #

• 去掉li的上下内边距，把padding:20px 20px改成padding:0 20px；如果需要扩大点击区域，给a标签设置上下内边距更合理。
• 消除inline-block的空白间距：给父元素.nav-links设置font-size:0，再给li恢复原本的字体大小（避免继承父元素的0字号导致文字消失）。

修改后的CSS代码 #

*{
    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;
    font-size: 0; /* 消除inline-block元素间的空白 */
}
.nav-links li{
    display: inline-block;
    padding: 0 20px; /* 仅保留左右内边距 */
    font-size: 20px; /* 恢复字体大小 */
}
.nav-links li a{
    transition: all 0.3s ease 0s;
    display: inline-block;
    padding: 20px 0; /* 给a标签设置上下内边距，提升点击体验 */
}
.nav-links li a:hover{
    color: rgba(224,88,255,1.00)
}

内容的提问来源于stack exchange，提问作者Tim B.