如何减少导航栏（Navbar）的空白间距？

针对你提到的导航栏空白间距问题，结合你的代码，以下是具体的调整方案：

问题定位 #

你的代码里有几个导致多余空白的关键点：

1. header 使用了 padding: 2px 10%，左右10%的内边距会在屏幕两侧产生较大空白（对应你说的蓝色区域）
2. 全局选择器 .nav-links, li, a 错误地给所有li和a标签添加了margin:10px，导致额外间距，同时浏览器默认的ul标签有内置的左内边距
3. hover样式选择器错误，会影响所有a标签而非仅导航链接

具体修改代码 #

调整Header的内边距 #

将header的左右padding从10%改为更小的值，比如2%或固定像素值，减少两侧空白：

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 2%; /* 替换原10%的左右padding，可根据需求调整为20px等固定值 */
  margin: 0 20px;
  border-bottom: 1px solid #00000028;
}

修复导航链接的样式 #

重置ul的默认样式，精准控制导航栏内元素的间距，避免全局污染：

.logo {
  height: 50px;
  width: 50px;
}

/* 仅给导航ul设置样式，重置默认padding和margin */
.nav-links {
  display: flex;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* 给导航li设置左右间距，上下间距按需调整 */
.nav-links li {
  margin: 0 10px;
}

/* 导航链接的样式，去掉多余margin */
.nav-links li a {
  font-size: 16px;
  text-decoration: none;
  font-weight: 700;
  color: black;
  margin: 0;
}

/* 仅导航链接hover变色 */
.nav-links li a:hover {
  color: #0052FF;
}

调整登录注册区域的样式 #

避免被全局样式影响，重置该区域a标签的margin：

.login-signup {
  display: flex;
  font-size: 16px;
}

.login-signup a {
  margin: 0 8px; /* 按需调整间距，避免和导航样式冲突 */
}

.login-btn {
  font-size: 16px;
  cursor: pointer;
  font-weight: 700;
  border: none;
  background: transparent; /* 添加上背景透明，避免默认按钮样式 */
}

.login-btn:hover {
  color: #0052FF;
}

.signup-btn {
  cursor: pointer;
  background-color: #0052FF;
  border-style: solid;
  color: white;
  font-size: 16px;
  font-weight: 700;
  border-radius: 5px;
  border-color: #0052FF;
  padding: 10px 12px;
}

.signup-btn:hover {
  background-color: #0044d7;
  border-color: #0044d7;
}

保留原HTML结构（无需改动） #

<header>
  <img class="logo" src="{{url_for('static', filename='images/logo.png')}}" alt="logo">
  <nav>
    <ul class="nav-links">
      <li><a href="#">Explore</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <div class="login-signup">
    <a href="#"><button class="login-btn">Log In</button></a>
    <a href="#"><button class="signup-btn">Sign Up</button></a>
  </div>
</header>

调整逻辑说明 #

• 通过缩小header的左右padding直接减少两侧空白区域
• 重置ul默认的padding和margin，消除浏览器自带的间距
• 精准控制导航元素的margin，避免全局样式影响到登录注册区域
• 修正hover样式的作用范围，确保仅导航链接触发变色效果

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