[分享]css两个字三个字间距问题

在CSS中，字之间的间距可以通过 letterspacing 属性来调节。默认情况下，letterspacing 的值为 normal，即常规间距。但是，当我们需要对字间距进行微调时，可以设置一个具体...

在CSS中，字之间的间距可以通过 letter-spacing 属性来调节。默认情况下，letter-spacing 的值为 normal，即常规间距。但是，当我们需要对字间距进行微调时，可以设置一个具体的值。

然而，有些时候，当我们想要在HTML中让两个字或三个字之间的间距稍微扩大一些，却发现设置 letter-spacing 后效果并不理想。比如，当我们想要在标题或 logo 中让 "CSS" 这三个字之间的间距增加，通常会尝试如下代码：

.logo {
  letter-spacing: 0.1em;
} 

但是，运行上述代码后，我们会发现 CSS 这三个字间的距离似乎并没有增加。这是为什么呢？

原因是因为，letter-spacing 属性只会增加字符之间的间距，而不会影响字符内部的间距。对于字母 "C" 和 "S" 来说，它们内部的间距比较紧凑，而 letter-spacing 属性只能控制它们之间的距离。

那么如何解决这个问题呢？有两种解决方案：

1. 使用 CSS 中的 text-spacing 属性来控制字符内部的间距，但是该属性目前尚未被标准化。
2. 将 "CSS" 等字母转化为一个整体，使用 letter-spacing 属性来控制整体间距。具体做法是，在 HTML 中使用 <span> 标签将这些字母包裹起来，然后在 CSS 中为该 span 标签设置 letter-spacing 属性。

.logo span {
  letter-spacing: 0.1em;
} 

通过以上方式，我们就可以比较方便地调整两个字或三个字之间的间距了。