设置letter-spacing后p标签text-align:center无法完全居中求助

问题原因 #

设置letter-spacing时，浏览器会在**每个字符（包括最后一个字符）**后方添加指定间距，这会让元素的实际宽度比文本内容宽出一个letter-spacing的距离。当使用text-align: center时，这个额外的右侧间距会让视觉上文本偏左，看起来右侧空白更多。

解决方案 #

有两种简单的修复方式，任选其一即可：

方法1：给文本元素添加负margin抵消额外间距

直接修改你的.ls类，添加margin-right值等于负的letter-spacing大小：

.ls {
    letter-spacing: .35em;
    margin-right: -.35em;
}

这个方法无需修改HTML，直接通过CSS抵消最后一个字符后的多余间距，让元素宽度匹配文本实际宽度，text-align: center就能正常生效。

方法2：用内联元素包裹文本，单独调整间距

如果不想修改全局的.ls类，可以给文本套一个<span>标签：

<p class="text-neutral-500 ls bg"><span>FOLLOWERS</span></p>

然后添加CSS：

.ls {
    letter-spacing: .35em;
}
.ls span {
    margin-right: -.35em;
}

这种方式更灵活，不会影响其他使用.ls类的元素。

效果验证 #

修改后，FOLLOWERS文本的左右空白会完全对称，text-align: center就能实现真正的居中效果。

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