在网页内容排版中，上标和下标是常用的文本格式，比如数学公式中的平方符号、化学分子式的元素下标、文章脚注的标注数字等，都需要通过特定的样式让文字显示在基准线的上方或下方。css提供了对应的属性可以快速实现这类效果，不需要依赖额外的图片或者复杂的布局代码。
核心实现属性：vertical-align
控制文字上标和下标的核心css属性是vertical-align，这个属性用来设置行内元素或者表格单元格元素的垂直对齐方式，针对上标和下标有两个专属的属性值：
- super：让元素的内容相对于父元素向上偏移，显示为上标效果
- sub：让元素的内容相对于父元素向下偏移，显示为下标效果
基础使用示例
我们可以通过给需要设置为上标或下标的文字包裹行内标签，然后添加对应的vertical-align样式来实现效果，以下是基础的代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css上标下标示例</title>
<style>
.sup-text {
vertical-align: super;
font-size: 0.8em; /* 上标文字通常比正文小 */
}
.sub-text {
vertical-align: sub;
font-size: 0.8em; /* 下标文字通常比正文小 */
}
</style>
</head>
<body>
<p>数学公式示例：x<span class="sup-text">2</span> + y<span class="sup-text">2</span> = z<span class="sup-text">2</span></p>
<p>化学分子式示例：H<span class="sub-text">2</span>O、CO<span class="sub-text">2</span></p>
<p>脚注示例：这是一段正文内容<span class="sup-text">1</span></p>
</body>
</html>
使用HTML语义化标签简化实现
除了自定义样式，html本身也提供了两个语义化的标签来直接表示上标和下标，浏览器会默认给这两个标签添加对应的vertical-align样式，不需要额外编写css代码：
<sup>：语义为上标，浏览器默认设置为vertical-align: super<sub>：语义为下标，浏览器默认设置为vertical-align: sub
以下是使用语义化标签的代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语义化标签实现上标下标</title>
</head>
<body>
<p>数学公式：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>化学分子式：H<sub>2</sub>SO<sub>4</sub>（硫酸）</p>
</body>
</html>
两种实现方式的对比
我们可以通过表格对比自定义样式和语义化标签两种实现方式的差异：
| 实现方式 | 优势 | 适用场景 |
|---|---|---|
| 自定义vertical-align样式 | 可以灵活调整偏移量、字体大小等样式，不受浏览器默认样式限制 | 需要自定义上标下标样式，或者需要兼容特殊排版需求的场景 |
| sup/sub语义化标签 | 代码更简洁，语义更明确，对屏幕阅读器等辅助设备更友好 | 普通的上标下标场景，不需要自定义特殊样式的场景 |
注意事项
- 上标和下标元素都是行内元素，不会单独占一行，只会和相邻的文字在同一行显示
- 浏览器默认会给
<sup>和<sub>标签设置较小的字体大小，如果需要统一字体大小，可以额外添加font-size样式覆盖默认设置 - 如果上标下标内容较多，可能会影响行高，可以通过调整父元素的
line-height属性来优化排版效果
自定义偏移量示例
如果默认的super和sub偏移量不符合需求，还可以通过vertical-align的数值设置来自定义偏移距离，数值可以是正数（向上偏移）或负数（向下偏移）：
/* 自定义上标偏移量，向上偏移0.5em */
.custom-sup {
vertical-align: 0.5em;
font-size: 0.8em;
}
/* 自定义下标偏移量，向下偏移0.3em */
.custom-sub {
vertical-align: -0.3em;
font-size: 0.8em;
}
css上标下标vertical_align修改时间：2026-06-10 08:21:26