code标签需显式设置letter-spacing调整字距，常见无效因字体不敏感、white-space限制、浏览器兼容性或行框挤压；中英文混排宜分设0.02em～0.05em与-0.05em；应避免继承干扰，优先用em单位并换优写字体。

code 标签默认不带字间距调整，要改必须显式加 letter-spacing，不能靠空格、margin 或 padding 模拟。

为什么直接给 code 加 letter-spacing 有时没反应

常见不是写错了，而是被其他样式压制或渲染限制卡住：

• code 常被重置为 font-family: monospace，某些等宽字体（如 Courier New）对 letter-spacing 不敏感，视觉变化微弱
• 父容器设了 white-space: nowrap 且宽度不足 → 字符强行撑出，看起来像“没变”
• 浏览器对内联等宽元素的 letter-spacing 支持不一，旧版 Safari 在 code 上可能忽略负值
• 若 code 套在 pre 里，而 pre 设了 font-size 但没设 line-height，行框挤压会掩盖字距变化

code 标签字间距的合理取值范围

中英文混排是 code 的典型场景，统一设一个值容易失衡：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 纯英文/数字代码：可用 letter-spacing: -0.05em 微收，提升紧凑感；超过 -0.1em 小字号下易粘连
• 含中文注释或变量名（如 const 用户名 = "张三"）：建议用 letter-spacing: 0.02em～0.05em，避免汉字“断开”
• 绝对像素值慎用：letter-spacing: 1px 在 font-size: 12px 下占比过大，font-size: 16px 下又偏小，优先选 em
• 重置时用 letter-spacing: normal，别写 0 —— 因为不同字体的 normal 实际值不同，语义更准

如何只影响 code 本身，不波及内部子元素

code 是内联元素，但常嵌套 span 高亮关键词，或 em 强调。若直接在 code 上设 letter-spacing，子元素会继承并叠加：

立即学习“前端免费学习笔记（深入）”；

• 加 code > * 覆盖：例如 code { letter-spacing: 0.03em; } code > * { letter-spacing: normal; }
• 用 :not() 排除：如 code:not(.no-spacing) { letter-spacing: 0.02em; }，再给需要保持原样的加 class="no-spacing"
• 避免在 code 外层容器（如 div 或 pre）上设 letter-spacing —— 它会透传到所有文本，包括换行符和空格，导致缩进错乱

真正难调的是等宽字体 + 中文 + 高亮语法的组合，letter-spacing 只能微调，救不了字体本身的 kerning 缺陷；如果发现无论怎么调都“发虚”或“粘连”，该换字体了，比如换成 JetBrains Mono 或 Fira Code，它们自带连字和优化字距。