如何减小移动端导航栏中链接之间的间距

我想减小移动端导航栏内链接的间距，但链接间自动留出了较大空间，修改margin和padding后没有改善，怀疑问题和height属性有关。

相关代码 #

CSS #

@media screen and (max-width:991px) {
  #menu-btn {
    display: inline-block;
  }
  .header .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    background: #13131a;
    width: 25rem;
    height: 100vh;
    align-items: flex-start;
  }
  .header .navbar a {
    color: #fff;
    display: block;
    margin: 2rem;
    padding: 0.5rem;
    font-size: 3rem;
  }
}

HTML #

<header class="header">
  <a class="logo" asp-action="Index">
    <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" width="60" alt="logo" />
  </a>
  <div class="navbar nav">
    <a asp-action="Index">Home</a>
    <a href="#products">Products</a>
    <a href="#about">About Us</a>
    <a href="#contact">Contact Us</a>
  </div>
  <div class="icons">
    <i class="fa-solid fa-cart-shopping "></i>
    <i class="fa-solid fa-magnifying-glass "></i>
    <i class="fa-solid fa-right-to-bracket "></i>
    <i class="fa-solid fa-bars " id="menu-btn"></i>
  </div>
  <div class="search-form">
    <input type="search" id="search-box" placeholder="جستجو..." />
    <label for="search-box" class="fa-solid fa-magnifying-glass"></label>
  </div>
</header>

问题截图 #

1. 补全导航栏的flex布局规则
   你给.header .navbar加了align-items: flex-start，但没开启flex布局，这个属性不会生效。要让链接垂直排列并精准控制间距，必须补上display: flex和flex-direction: column，同时可以清掉默认的内外边距：

   .header .navbar {
     position: absolute;
     top: 100%;
     left: 0;
     background: #13131a;
     width: 25rem;
     height: 100vh;
     display: flex; /* 开启flex布局 */
     flex-direction: column; /* 设置子元素垂直排列 */
     align-items: flex-start;
     padding: 0;
     margin: 0;
   }
   

2. 直接缩小链接的外边距
   当前a标签的margin: 2rem会给上下左右都留2rem的空隙，这是间距过大的主要原因。直接把这个值改小，比如上下设1rem、左右保留2rem：

   .header .navbar a {
     color: #fff;
     display: block;
     margin: 1rem 2rem; /* 缩小上下方向的间距 */
     padding: 0.5rem;
     font-size: 3rem;
     line-height: 1; /* 避免默认行高额外占用空间 */
   }
   

3. 排查框架默认样式干扰
   你的导航栏同时使用了nav类，如果这个类来自Bootstrap等前端框架，可能自带默认的内外边距。可以用浏览器F12开发者工具查看元素的实际样式，找到额外间距的来源后针对性覆盖：

   .header .navbar.nav {
     margin: 0 !important;
     padding: 0 !important;
   }
   

4. 关于height属性的说明
   height: 100vh只是让导航栏占满整个视口高度，不会直接导致链接间距变大。只有当父容器开启flex布局且设置了justify-content: space-between这类分散对齐的属性时，才会让链接自动分散开，但你的代码里没有相关设置，所以height不是问题的根源。

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