如何缩小H、下标2、O三个div元素间的字符间距？

你遇到的问题根源在于：每个字符被放在独立的<div>标签中，这些inline元素之间的空白字符（HTML里的换行、空格）会被浏览器渲染成间距，而letter-spacing只作用于单个元素内部的文本字符，对不同元素之间的间距无效。

下面是几种可行的解决方法：

方法1：移除HTML中的空白字符 #

把三个<div>写在同一行，消除它们之间的换行和空格，浏览器就不会渲染出额外间距：

<div>H</div><div class="sub1">2</div><div>O</div>

CSS保持原有代码即可。

方法2：父容器设置font-size: 0 #

给父容器添加font-size: 0，让元素间的空白字符大小为0，再给子元素重新设置字体大小：

.parent {
  font-size: 0;
}
.parent div {
  display: inline;
  font-size: 16px; /* 恢复默认字体大小，可根据需求调整 */
}
.sub1{
  vertical-align: sub;
  font-size:x-small;
}

对应的HTML需要把三个div放在父容器内：

<div class="parent">
  <div>H</div>
  <div class="sub1">2</div>
  <div>O</div>
</div>

方法3：给元素设置负margin #

通过负margin抵消元素间的默认间距，数值可根据实际显示效果调整：

div { 
  display: inline;
  margin-right: -2px; /* 负margin抵消间距，按需调整 */
}
.sub1{
  vertical-align: sub;
  font-size:x-small;
}

方法4：使用语义化的<sub>标签（推荐） #

直接在同一文本中使用<sub>标签实现下标，这是语义化的标准做法，且天然不会有元素间的额外间距：

H<sub>2</sub>O

CSS可简化为：

sub {
  font-size:x-small;
}

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