如何在不影响其他元素的前提下扩大内联元素的可点击区域？

这是内联元素的盒模型特性和浏览器事件触发逻辑共同导致的：

1. 你给span加的负margin确实让周围文本（比如d）重叠到了span的padding区域，但文本节点和span属于同一层级，且在文档流中d位于span之后，视觉上d会覆盖在span右侧的padding区域上。当鼠标移到这里时，浏览器会优先响应文本节点的事件，而非span的，所以cursor不会变成指针，点击也无效。
2. 内联元素的可点击区域（hitbox）在水平方向上会被相邻的内联内容截断——哪怕padding扩展了背景区域，超出当前文本流范围的部分也无法触发事件。

最稳妥且通用的方法是用伪元素+相对定位来扩大点击区域，完全不影响原有布局，还能保证整个扩展区域都能触发事件：

span {
  position: relative;
  /* 移除原来的padding和负margin */
  cursor: pointer;
}

span::before {
  content: '';
  position: absolute;
  /* 上下左右各扩展5px，对应你想要的点击区域大小 */
  inset: -5px;
  background-color: red;
  /* 让伪元素在文本下方，避免遮挡文字 */
  z-index: -1;
}

ab<span>c</span>def

原理说明 #

• 伪元素是绝对定位，脱离文档流，不会干扰周围元素的排版
• inset: -5px 让伪元素在span的内容区域外扩5px，形成更大的点击触发范围
• z-index: -1 确保伪元素不会覆盖上层的文本（包括d），但作为span的子元素，点击事件会冒泡到span上，所以整个红色区域都能触发hover和click

如果你的span本身需要保留边框等样式，可以调整伪元素的作用，只用来扩展点击区域：

span {
  position: relative;
  background-color: red;
  cursor: pointer;
  /* 保留原有边框等样式 */
  border: 1px solid darkred;
}

span::before {
  content: '';
  position: absolute;
  inset: -5px;
  background-color: transparent; /* 透明背景，仅作为点击区域 */
}

备选方案（局限性较大） #

如果场景简单，也可以把span设置为display: inline-block，用位移抵消padding的布局影响，但这种方法可能在复杂排版下出现换行问题，且仍可能存在事件优先级冲突：

span {
  display: inline-block;
  padding: 5px;
  transform: translateX(-5px);
  margin-right: -10px; /* 抵消左右padding的总宽度 */
  background-color: red;
  cursor: pointer;
}

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