如何修改Navbar顶部内边距？解决悬停时上下高度异常问题

问题根源在于你用了<h3>标签，浏览器默认会给这类标题标签加上上下外边距（margin），悬停时虽然你给.nav加了背景，但<h3>的默认margin会让导航项的实际高度出现视觉上的拉伸——就算设置固定height也没用，因为margin是元素外部的间距，不会被算在height里。

直接改这两处就能解决：

• 去掉<h3>的默认上下margin，避免额外间距干扰
• 给.nav设置统一的内边距或固定高度，确保悬停前后高度一致

修改后的完整代码 #

CSS 代码

#navbar {
  display: flex;
  justify-content: space-between;
}

.nav {
  margin: 1px auto;
  padding: 8px 6px; /* 调整内边距，让点击区域更合理 */
}

.nav h3 {
  margin: 0; /* 清除h3的默认上下margin */
}

.nav:hover {
  background-color: #84a98c;
}

HTML 代码

<div id="navbar">
  <div class="nav">
    <h3>Home</h3>
  </div>
  <div class="nav">
    <h3>About</h3>
  </div>
  <div class="nav">
    <h3>Tools</h3>
  </div>
  <div class="nav">
    <h3>Contact</h3>
  </div>
</div>

如果想要固定高度，也可以给.nav设置固定高度并让内容垂直居中，这样悬停前后高度完全一致：

.nav {
  margin: 1px auto;
  padding: 0 6px;
  height: 40px; /* 自定义高度数值 */
  display: flex;
  align-items: center;
}

.nav h3 {
  margin: 0;
}

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