优先用letter-spacing控制单个文字间空隙，用margin控制菜单项间距离；二者作用对象不同，混用易错乱，推荐flex布局下使用gap替代margin实现均匀导航间距。
导航栏文字间距用 letter-spacing 还是 margin？
直接说结论：优先用 letter-spacing 控制单个文字之间的空隙，用 margin 控制整个菜单项（比如 <li> 或 <a></a>）之间的距离。两者作用对象不同，混用容易错乱。
常见错误是给 <a></a> 加 margin-right 做“字间距”，结果最后一个链接多出空白、响应式时错位、或 hover 区域不连续。
-
letter-spacing作用于文本内容本身，适合微调“字与字之间”的视觉疏密（如中文字体默认紧凑，可设letter-spacing: 2px） -
margin作用于块级/行内块元素的外边距，适合控制“菜单项与菜单项”之间的间隔（如每个<li>右侧留空） - 若导航项是行内元素（
display: inline），margin对<a></a>有效；但更推荐统一用display: inline-block或 Flex 布局，避免行内元素 margin 合并等意外行为
Flex 布局下怎么均匀分配导航文字间距？
现代导航基本都用 display: flex，这时别再手动算 margin，改用 justify-content 或 gap 更可靠。
例如：
.nav {
display: flex;
justify-content: space-between; /* 首尾贴边，中间均分 */
}
/* 或更灵活的 */
.nav {
display: flex;
gap: 1.5rem; /* 推荐！各导航项间固定间距，不依赖 margin */
}
-
gap是最干净的方案，只影响子项间隙，不干扰首尾对齐逻辑 -
justify-content: space-around会让首尾项到容器边缘的距离是项间距离的一半，易造成视觉不平衡 - 注意
gap在旧版 Safari（-webkit-gap 前缀
中英文混排时文字间距为什么看起来不一致？
因为中文字体通常没有字偶距（kerning），而英文字母有天然间距调整机制。直接设 letter-spacing: 1px 会导致英文过松、中文过紧。
- 解决方案：用
font-kerning: normal（默认值，确保英文正常） + 单独为中文包裹<span class="zh">首页</span>微调 - 或者用 CSS 的
@supports检测字体特性，但实际项目中更常用的是「统一用gap控制项间距，放弃对单字间距的全局干预」 - 极端情况可尝试
text-rendering: optimizeLegibility，但仅对部分字体生效，且可能轻微影响性能
移动端导航文字太挤，缩放后空隙消失怎么办？
根本原因是用固定像素（如 letter-spacing: 2px）导致缩放时绝对值不变，相对字号变小。解决思路是改用相对单位。
- 把
letter-spacing改成em或rem，例如letter-spacing: 0.05em，随字体大小等比缩放 - 如果用
gap，也建议用rem（如gap: 1rem），避免视口缩放后导航项重叠 - 检查是否在媒体查询里重置了
font-size却忘了同步调整letter-spacing—— 这是最常被忽略的断点陷阱
真正难处理的不是“怎么加空隙”，而是“加在哪一层”：字级、项级、还是容器级。选错层级，后面所有适配都会变成补丁堆叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
