如何让页面按钮与链接保持同高且不破坏hover效果？

我帮你排查了这个问题，其实根源在于浏览器对<a>标签和<button>标签的默认样式处理有细微差异——哪怕你给两者设置了相同的padding，它们的盒模型、对齐方式还是会有偏差，最终导致hover状态下出现视觉空白。

问题核心原因 #

• <button>标签自带浏览器预设的样式属性（比如默认的line-height或vertical-align），和<a>标签的默认值不一致
• 浮动的<a>标签与按钮的布局特性不匹配，导致hover背景无法完全覆盖预期区域

修复方案 #

你可以通过统一两者的核心样式来解决这个问题，以下是调整后的代码：

.navbar a {
  float: left;
  font-size: 16px;
  color: #b58b23;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  /* 新增：统一盒模型与行高 */
  box-sizing: border-box;
  line-height: 1;
}

.dropdown .drpbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #b58b23;
  padding: 14px 16px;
  background-color: inherit;
  /* 新增：匹配链接的布局与盒模型 */
  box-sizing: border-box;
  line-height: 1;
  display: block;
  float: left;
}

/* 可选：统一hover样式，强化视觉一致性 */
.navbar a:hover, .dropdown .drpbtn:hover {
  background-color: #f0e6d6;
}

关键调整说明 #

• box-sizing: border-box：确保padding不会改变元素的总尺寸，让按钮和链接的实际占用空间完全一致
• line-height: 1：统一垂直方向的文本对齐，消除因行高差异导致的微小偏移
• display: block; float: left：让按钮和链接的布局特性完全匹配，避免默认inline-block与浮动元素的对齐冲突

这样调整后，按钮和链接的高度、hover响应区域就会完全吻合，不会再出现恼人的空白啦~

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