如何减小两个连续<sup>元素之间的空白间距

间距产生原因 #

该空白不是margin、padding属性导致的：<sup>默认是行内元素，两个<sup>标签之间的代码换行、缩进会被浏览器解析为文本节点的空白字符，最终渲染为1个半角空格宽度的间距。

解决样式 #

使用相邻兄弟选择器选中除第一个<sup>外的后续同类元素，设置负左外边距抵消空白即可，em单位会随当前字体大小自适应，数值可根据实际渲染效果微调：

sup + sup {
  margin-left: -0.25em;
}

如果允许修改HTML结构，也可直接将相邻的<sup>标签连写、中间不留代码空隙，从根源避免这类行内元素空白问题，示例写法：

<p>Test
  <sup>1</sup><sup>, 2</sup>
</p>

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