如何设置导航链接的背景填充，使其覆盖更大空间而非仅围绕文字

网站右上角的导航栏（NavBar）链接在激活（active）和悬停（hover）状态下，白色背景填充仅围绕文字区域，希望调整为更大的背景填充范围，让按钮拥有更饱满的点击区域和视觉效果。

当前使用代码 #

HTML代码 #

<div class="header">
  <h1>Redacted</h1>
  <div class="topnav">
    <a class="active" href="index.html">Home</a>
    <a href="resume.html">Resume</a>
    <a href="contact.html">Contact</a>
  </div>
</div>

CSS代码 #

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
}

.header {
  padding: 10px;
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  color: white;
  text-decoration: none;
  overflow: hidden;
}

.topnav {
  overflow: hidden;
}

.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 15px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: white;
  color: black;
  border: 10px;
}

.topnav a.active {
  background-color: white;
  color: black;
  width: 100px;
}

解决方案 #

问题核心在于a标签默认是行内元素，设置width不生效，且当前padding值过小。通过以下调整实现更大的背景填充：

修改后的CSS代码 #

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
}

.header {
  padding: 10px;
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  color: white;
  text-decoration: none;
  overflow: hidden;
}

.topnav {
  overflow: hidden;
  display: flex;
  gap: 8px; /* 可选：控制导航项之间的间距 */
}

.topnav a {
  color: #f2f2f2;
  text-align: center;
  display: inline-block; /* 让元素支持宽高和完整填充 */
  padding: 14px 24px; /* 增大左右内边距，扩大背景范围 */
  text-decoration: none;
  font-size: 17px;
  border-radius: 4px; /* 可选：添加圆角优化视觉 */
}

.topnav a:hover {
  background-color: white;
  color: black;
}

.topnav a.active {
  background-color: white;
  color: black;
}

关键修改说明 #

• 给.topnav添加display:flex和gap，让导航项排列更规整，同时控制间距。
• 给.topnav a设置display:inline-block，确保内边距和背景填充覆盖整个按钮区域。
• 增大padding的左右值（从15px改为24px），直接扩大背景填充范围，可根据需求调整上下内边距。
• 移除无效的border:10px和width:100px，避免样式冲突，用padding控制按钮大小更灵活。

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