CSS：如何修复特殊符号超出line-height控制的多余间距问题

问题原因 #

你遇到的多余间距属于该字符本身的固有属性，这类小众Unicode符号的字体默认预留了超出可见范围的上下em边距，用来适配多语言混排场景，叠加你放大字号、相对定位偏移、行高设为0的操作后，就会出现元素可见位置和实际点击区域错位、溢出到上一行的问题。

可行解决方案 #

你之前尝试inline-block无效是因为没配合固定宽高设置，正确修改后的伪元素样式如下：

a::before {
  content: '࿊';
  display: inline-block;
  /* 手动控制盒子尺寸，点击区域严格限制在这个范围内 */
  width: 0.8em;
  height: 0.8em;
  line-height: 0.8em;
  background-color: red;
  /* 用vertical-align替代相对定位实现对齐，不会出现点击区域错位 */
  vertical-align: middle;
  color: white;
  border-radius: 50%;
  font-size: 1.8em;
}

如果符号垂直位置还是不对，只需要微调vertical-align的数值即可，比如改为vertical-align: 0.1em，不要用position: relative的top偏移，避免出现渲染位置和点击区域错位的问题。

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