按钮间空白处触发点击并非bug，而是padding与行内布局导致的热区溢出；应使用flex+gap替代行内布局，并清除默认margin，避免嵌套交互元素引发DOM修正。
按钮之间点到空白处却触发了点击，不是 bug，是 padding + 行内布局共同制造的“热区溢出”。真正要控制的不是“看起来的间距”，而是可点击区域的边界。
button 的 padding 为什么会扩大可点击范围
给 button 设置 padding: 12px 后，它的点击热区会完整覆盖内边距区域——这是正确且预期的行为。但问题常出现在多个 button 并排时：如果它们用 display: inline-block 或默认行内流式排列，两个按钮之间的“空白”其实是父容器里未被清除的文本节点（换行符、空格），而这些空白在某些浏览器中会被视为可响应鼠标事件的区域，尤其当 line-height 或 font-size 没有重置时。
- 现象：鼠标移到两个按钮中间的缝隙，光标变手型，点击后任意一个按钮响应
- 根本原因：不是按钮“漏出”了，而是父容器把空白当成了可交互上下文的一部分
- 修复方向：让间距脱离文本流控制，改由布局层（如 Flexbox）显式定义
用 flex + gap 替代 margin 或 padding 控制间距
gap 是现代 CSS 中唯一专为“容器内项目间距离”设计的属性，它生成的间隙完全独立于子元素的盒模型，不参与任何事件捕获或渲染权重。
-
.links { display: flex; gap: 16px; }—— 间隙安全、语义清晰、无点击穿透风险 - 必须配合
margin: 0清除button自带的默认外边距（尤其 Safari 旧版） - 避免同时设置
gap和margin，否则间距会叠加，视觉和逻辑都失控 - IE 不支持
gap，若需兼容，可用margin-right配合:last-child { margin-right: 0; }
嵌套
W3C 明确禁止在 button 内部嵌套交互式元素（如 a、button、input）。一旦出现，浏览器会强制“修复”DOM：把内部 button 移出父级，但保留其事件监听器绑定逻辑——结果就是点击位置和实际响应元素错位。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<button><a href="#">Link</a></button> - 正确做法：要么用纯
<a></a>加role="button"和键盘支持，要么用button[type="button"]+ JS 跳转 - 检查方式：打开 DevTools → Elements 面板，看实际渲染的 DOM 结构是否与源码一致
最容易被忽略的是：可点击区域的“边界”从来不由视觉间距决定，而由事件目标路径（event.composedPath()）和盒模型参与度共同定义。别依赖肉眼对齐，用 DevTools 的“Toggle element hover state”反复验证每个像素是否真的可交互。
