sub/sup标签本身不控制字间距，真正起作用的是CSS的letter-spacing属性；直接设置有时无效因字体渲染舍入、继承干扰及行内替换元素特性；推荐用em单位、分离中英文控制、避免负值，并配合font-variant-numeric。
sub 和 sup 标签本身不控制字间距，它们只是语义化标签，用于上标和下标；真正起作用的是 CSS 的 letter-spacing 属性，且必须显式应用到这些标签或其父容器上。
为什么直接给 sub 或 sup 加 letter-spacing 有时没效果？
常见现象是 DevTools 里样式已写、computed 值也显示生效，但视觉上“看不出变化”。原因有三：
- 字体渲染限制：小字号（如
font-size: 0.7em）下，letter-spacing: 1px实际被浏览器舍入为 0 —— 改用em单位更可靠，例如letter-spacing: 0.02em - 继承干扰：若父元素设了
letter-spacing: -0.5px，而sub又没重置，就会叠加收紧，导致文字粘连 - 行内替换元素特性：
sub/sup是行内元素，但会触发匿名行框重排；若周围有white-space: nowrap或容器宽度不足，字符会被强制挤出可视区，而非“间距变小”
sub 标签字间距的推荐写法（含中英文混排）
中文场景下，sub 常用于单位、脚注编号（如 “kg2”、“第一章”），需注意汉字与数字/字母对同一 letter-spacing 的响应差异：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 统一宽松排版（如学术公式）：
sub { letter-spacing: 0.03em; }—— em 单位随font-size缩放，避免小屏失效 - 中英文混排时分离控制：
sub.lang-zh { letter-spacing: 0.015em; } sub.lang-en { letter-spacing: 0.04em; }，再在 HTML 中写<sub class="lang-zh">一</sub>或<sub class="lang-en">th</sub> - 避免负值：中文
sub用letter-spacing: -0.01em就可能让“第一章”变成“第一章”，肉眼难分辨，慎用
别在 sub/sup 上直接设 line-height 或 padding
这两个属性对 sub/sup 的影响不可控：
立即学习“前端免费学习笔记（深入）”；
-
line-height会拉高整行基线，可能撑开段落行距，但sub本身垂直偏移量（由vertical-align决定）不变，造成视觉错位 -
padding在行内元素上部分浏览器（如 Safari iOS）不渲染，或仅在块上下文生效；若真要留白，应包裹一层span并设display: inline-block - 正确替代方案：
sub { margin-inline-end: 0.1em; }控制右侧留空，不影响基线，兼容性好
最易被忽略的一点：所有针对 sub 的 letter-spacing 调整，都必须配合 font-variant-numeric: tabular-nums;（如含数字下标）—— 否则等宽数字与比例数字混排时，间距感知会严重失真。
