HTML中的sub化学分子式 HTML中的sub标签样式垂直对齐处理

默认垂直对齐位置不一致，因其vertical-align:sub的偏移量由浏览器决定且受font-size、line-height影响；设font-size后位置歪斜是因未重置vertical-align导致叠加偏移；多sub混排需用vertical-align:baseline+transform统一基准；在flex/grid中vertical-align失效，须外包inline-block或改用transform。

sub 标签默认垂直对齐位置不一致？

<sub> 默认使用 vertical-align: sub，但它的实际偏移量由浏览器渲染引擎决定，不是固定像素值，且会受父元素 font-size 和 line-height 影响。化学式如 H2O 中的 “2” 看起来偏低或偏高，往往不是标签错了，而是基线对齐逻辑在起作用——<sub> 对齐的是「当前行内文本的下标参考线」，而非绝对居中。

为什么给 sub 设置 font-size 后位置反而歪了？

直接写 sub { font-size: 0.65em; } 很常见，但若同时没约束 vertical-align，浏览器仍按原始 sub 偏移计算，新字号叠加旧偏移，容易导致下标“沉太深”或“浮太高”。更稳妥的做法是显式覆盖对齐方式：

• 用 vertical-align: -0.3em 或类似长度值替代 sub，获得可控偏移
• 配合 font-size: 0.7em，避免过小影响可读性（尤其在 Retina 屏）
• 加 line-height: 1 防止子元素撑开行高，干扰周围文本基线

化学式中多个 sub 连续出现时怎么保持水平齐平？

像 Ca3(PO4)2 这类结构，括号和数字混排时，<sub> 的默认行为会让括号内的 “4” 和结尾的 “2” 视觉高度不一致——因为括号本身是普通字符，而 <sub> 只作用于其包裹内容，不参与整体基线协商。

解决思路是统一用 vertical-align: baseline + 手动位移，例如：

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

sub.chem {  font-size: 0.72em;  vertical-align: baseline;  transform: translateY(0.12em);}

这样所有 <sub class="chem"> 都基于同一参考系偏移，比依赖浏览器内置 sub 更稳定。

sub 标签在 flex 或 grid 容器里失效？

vertical-align 对 display: flex 或 display: grid 的直接子元素完全无效——它只对 inline、inline-block、table-cell 生效。如果你把 <sub> 放进一个 display: flex 的按钮里，它的上下位置不会响应 vertical-align 设置。

此时必须换策略：

• 把 <sub> 外层包一层 <span style="display: inline-block">，恢复 vertical-align 生效条件
• 改用 transform: translateY() 配合固定单位（如 px 或 em）做微调
• 若整个容器是化学式专用区域，干脆放弃 <sub>，全部用 span + CSS 控制，语义稍弱但控制力更强

真正难的不是让一个 <sub> 看起来对，而是让它在不同字体、不同缩放、不同行高组合下都保持一致——这时候靠默认行为基本靠不住，得用可测量的数值锚定位置。