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 常用于单位、脚注编号（如 “kg₂”、“第_一章”），需注意汉字与数字/字母对同一 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 中写 _一 或 _th
• 避免负值：中文 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;（如含数字下标）—— 否则等宽数字与比例数字混排时，间距感知会严重失真。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！