如何消除导航元素间的间隙？前端布局问题求助

我想要让导航栏显示在header下方并带有圆角，使用了以下HTML代码：

<header>
<span>Header Text</span>
</header>
<nav>
<a href="#">Test</a>
<a href = "./login.html">Log In</a>
</nav>

以及以下CSS代码：

header {
    width:100%;
    text-align:center;
    background-color: grey;
    color:white;
    font-size: xx-large;
    margin:0;
    border-radius: 15px;
}

nav {
    width:100%;
    text-align:center;
    margin-top: 0;
    margin-bottom: 20px;
    
}

nav > * {
    background-color: grey;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    margin:0;
    
}

nav a:first-child {
    margin:0;
    padding-left:15px;
    border-radius:0 0 0 15px;
}

nav a:last-child {
    margin:0;
    padding-right: 15px;
    border-radius:0 0 15px 0;
}

nav a {
    margin:0;
    text-decoration: none;
}

实际效果中，我可以通过padding调整header的垂直对齐，但无法消除两个导航链接间的间隙，请问该如何解决？

导航链接间的间隙是因为<a>是行内元素，浏览器会把标签之间的换行、空格解析成空白字符，从而产生间隙。以下几种方法可以解决：

• 方法一：移除HTML中<a>标签间的空白
  直接把导航链接写成一行，去掉换行和空格：

<nav>
<a href="#">Test</a><a href="./login.html">Log In</a>
</nav>

• 方法二：通过字体大小消除间隙
  给nav设置font-size: 0，再给<a>标签恢复正常字体大小：

nav {
    width:100%;
    text-align:center;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 0; /* 清除空白间隙 */
}

nav a {
    margin:0;
    text-decoration: none;
    font-size: 16px; /* 恢复默认字体大小，可根据需求调整 */
    color: white; /* 建议添加文字颜色，避免灰色背景下文字不清晰 */
}

• 方法三：使用Flex布局（推荐）
  给nav设置Flex布局，既能消除间隙，还能让导航布局更灵活：

nav {
    width:100%;
    justify-content: center; /* 替代text-align:center实现水平居中 */
    margin-top: 0;
    margin-bottom: 20px;
    display: flex;
}

这种方式后续添加更多导航项时，布局稳定性更强。

另外补充：header的垂直对齐可以通过添加上下padding优化，比如给header加上padding: 10px 0;，让文字和容器边缘保持合适距离，视觉效果更舒适。

内容的提问来源于stack exchange，提问作者Hayden O'Sullivan