为何底部文本行向右偏移？已清除内外边距仍存在该问题

这个偏移问题的核心原因，是CSS letter-spacing的渲染特性与我们视觉感知的偏差，具体来说：

• 当你给一个块级文本元素设置letter-spacing时，浏览器会在每一个字符的右侧添加指定的间距——注意，是每个字符，包括文本的最后一个字符！
• 而text-align:center的居中逻辑，是基于包含这些所有额外间距的「文本总宽度」来计算的。但我们肉眼感知的文本中心，是不包含最后一个字符右侧那部分额外间距的。

拿你的代码举例：

• 第一行.heading-primary-main的文本是OUTDOORS（7个字符），letter-spacing:3.5rem，所以浏览器计算的总宽度是「7个字符的宽度 + 7×3.5rem」（每个字符右侧都加了间距）。但你视觉上认为的文本宽度，应该是「7个字符的宽度 + 6×3.5rem」（只有字符之间有间距）。
• 这就导致第一行文本的视觉中心比容器的实际居中位置偏左了（偏移量正好是3.5rem/2，也就是最后一个字符右侧间距的一半）。
• 第二行.heading-primary-sub的letter-spacing值小很多，这个视觉偏差也很小，所以看起来第二行文本相对于第一行向右偏移了。

你给第一行加padding-left能对齐，本质是手动把第一行的文本向右移动，抵消了这个视觉偏差。

更优雅的解决方法 #

不需要手动加padding-left，只需要给设置了letter-spacing的元素添加一个负的margin-right，抵消最后一个字符右侧的额外间距即可：

.heading-primary-main {
  display: block;
  font-size: 6rem;
  letter-spacing: 3.5rem;
  background-color: #ccc;
  margin-right: -3.5rem; /* 抵消最后一个字符的右侧间距 */
}

这样第一行文本的视觉中心就会和容器的实际居中位置完全重合，第二行自然就对齐了。

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