letter-spacing会真实增加盒模型宽度，因其在每个字符右侧统一外推固定值，总宽=字符总宽+字符数×letter-spacing值，导致overflow、换行异常或遮挡相邻元素。
letter-spacing 会真实增加元素的盒模型宽度，不是视觉错觉，而是每个字符右侧都额外外推固定值。
letter-spacing 怎么偷偷加宽了容器
它不是在「字符之间」插空隙（那样只有 n−1 个），而是在每个字符的渲染盒右侧统一外推一个固定值。所以总宽度 = 字符总宽 + 字符数 × letter-spacing 值。比如字符串 "ABC"（3 个字符）设 letter-spacing: 4px，就多出 12px 宽度，最后一个字符右边还挂着 4px 的“尾巴”。
- 这个增量参与盒模型计算，直接触发
overflow: hidden截断、换行异常或遮挡相邻元素 - 对
inline元素影响更隐蔽——它撑大行高和行内盒宽度，但不改变父块级容器高度 - 用
getBoundingClientRect()或 DevTools 的 Layout 面板能实测验证：宽度确实变大
为什么 margin-right 负值能抵消但不万能
给文字容器加 margin-right: -Xpx（X 等于 letter-spacing 值）可视觉抹掉“尾巴”，但仅适用于特定场景：
- 对
div、p、span（display: inline-block）有效 - 不适用于
input、button等替换元素——它们内部文本不响应子元素margin，伪元素定位也不可靠 - 若容器本身有
text-align: center，负margin会破坏居中逻辑，此时应改用text-indent - 慎用于 Flex/Grid 子项，可能干扰主轴对齐，尤其当
justify-content为center或space-between时
中文场景下最容易被忽略的宽度陷阱
中文没有天然词边界，letter-spacing 会强行在每个汉字后插空，导致：
立即学习“前端免费学习笔记（深入）”；
- 换行点错乱：浏览器把「汉字+空格」当成不可折行单元，整段文字撑出容器
- 字体差异放大误差：思源黑体里
0.03em可能刚好，微软雅黑里却触发重排或模糊渲染 - 单位选择影响稳定性：用
em或rem会让字距随font-size放大，小屏下抖动更明显；优先用px或无单位数值（如0.04） - WebFont 加载期间抖动：后备字体与最终字体的字宽差异，会让
letter-spacing视觉跳变，在 Grid 等等宽布局中尤为刺眼
真正难处理的是：这个“尾巴”宽度在不同字体、不同字号、不同浏览器下表现不一致，且无法通过 CSS 选择器精准检测——只能靠实机测试 + 容差预留。
