为何HTML按钮间的空白区域会触发链接？求助解决

问题出在你用<a>标签包裹<button>时，标签之间的换行和空格会被浏览器解析为空白文本节点，这些节点属于<a>标签的可点击范围，所以点击这些空白区域就会触发链接跳转。

解决方案1：消除<a>标签内的空白 #

把<a>和<button>写在同一行，或者用注释消除换行带来的空白：

<a href="https://github.com/Luffy01017" target="_blank"><button id="github">Github</button></a>

<!-- 或者用注释消除空白 -->
<a href="https://github.com/Luffy01017" target="_blank">
  <button id="github">Github</button><!--
--></a>

解决方案2：用按钮点击事件替代<a>标签包裹 #

更符合语义的做法是，不给按钮套<a>，而是通过JavaScript绑定跳转逻辑，这样完全避免空白区域的问题：

<button id="github" onclick="window.open('https://github.com/Luffy01017', '_blank')">Github</button>

解决方案3：用CSS隐藏空白区域 #

给包含这些元素的容器或者<a>标签设置font-size: 0，然后给按钮恢复正常字体大小，这样空白文本节点就不会占据空间：

.links a {
  font-size: 0;
}
.links button {
  font-size: 16px; /* 替换为你实际需要的字体大小 */
}

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