letter-spacing 在每个字符右侧真实外推固定值，导致末尾多出不可见但占空间的空白，总宽度=字符视觉宽度之和+字符数×letter-spacing值。
letter-spacing 会在每个字符右侧真实外推一个固定值，不是“字符之间”加空隙，所以末尾会多出一段不可见但占空间的空白。
letter-spacing 的宽度膨胀机制
它不是在 n 个字符之间插入 n−1 个空隙，而是对每个字符都执行“右移 + 插入 spacing”的操作。结果就是：总宽度 = 字符视觉宽度之和 + 字符数 × letter-spacing 值。
比如 "AB"（2 个字符）设 letter-spacing: 4px，实际多出 8px 宽度——其中 A 右侧 4px、B 右侧又一个 4px，“B 的右边”那段就是溢出源。
- 这个“尾巴”会撑开父容器，导致
overflow: hidden裁剪、flex 换行、text-overflow: ellipsis提前截断 - DevTools 的 Layout 面板里能看到 computed
width明显大于字体度量宽度 - 哪怕只写一个汉字，比如
「一」，设letter-spacing: 2px，也会多出 2px 右侧空白
为什么 margin-right 负值能抵消，但要小心用
因为那个“尾巴”是纯横向偏移量，用 margin-right 向左拉回等量距离就能视觉对齐，且不干扰文本流。
- 单位必须严格一致：
letter-spacing: 0.1em→margin-right: -0.1em；混用px和em会错位 - 仅适用于字符数固定的场景（如导航文字、Logo、按钮标签），动态内容（如用户昵称、文章标题）不能盲目套用
- 如果父容器有
padding-right，负 margin 会先吃掉 padding，再侵入内容区——需同步检查box-sizing和 padding 行为
替代方案：inline-block 包裹 + margin 控制
直接给文字加 margin-right 会影响行内布局（比如影响基线对齐或相邻 inline 元素间距），更稳妥的是用一层 display: inline-block 封装。
- 示例：
<h2><span style="display: inline-block; letter-spacing: 0.05em; margin-right: -0.05em;">标题</span></h2>
- 这样负 margin 只作用于该块，不会波及周围 inline 内容
- 避免了对整段
p或div盲目设负 margin 导致的换行/对齐异常
容易被忽略的继承与混排陷阱
letter-spacing 是可继承属性，且对空格、标点、emoji 一视同仁——中英文混排时极易放大问题。
- 例如
"Hello 世界"设letter-spacing: 2px，中间空格也被拉宽，单词间距翻倍 - 子元素（如
span里的英文缩写）会继承父级 letter-spacing，需显式重置：span { letter-spacing: normal; } - 中文段落慎用负值；小字号（≤14px）下
letter-spacing: -0.5px就可能让「口」「田」类字笔画粘连
真正要处理的不是“怎么让它看起来没多出空白”，而是承认它确实多出了——然后决定是用负 margin 精确削掉，还是换用 font-kerning + text-rendering 更底层地优化字距。后者对英文有效，但中文仍得靠 letter-spacing 这种机械方式，只是得算清楚那个“尾巴”到底有多长。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
