上标和下标

在过去，sup 和 sub 标签用于在文本线上方（上标）或下方（下标）显示内容，但在如今，我们通常将展示交由 CSS 处理。

你可以直接使用 CSS 属性 vertical-align，并将其值设为 super 或 sub，甚至是一个长度值，来达到基本的上标和下标效果。但这样做的弊端是，在段落中，包含上标或下标文本的行会改变该行的高度，导致段落间距不一致。

解决这个问题的方法是，定位我们想要设置为上标或下标的部分，然后将它们向上或向下微调（同时，通常惯例是将它们缩小一些）。

步骤 1：HTML

让我们先来定位相关的文本


<p>H<span class="atoms">2</span>SO<span class="atoms">4</span> is the chemical formula for sulphuric acid.
But how is this gold Au<span class="charge">2+</span>?</p>

步骤 2：垂直对齐

现在，要达到期望的效果，我们可以使用以下 CSS


p { line-height: 1.5 }

.charge {
    position: relative;
    bottom: 0.5em;
    color: red;
    font-size: 0.8em;
}

.atoms {
    position: relative;
    top: 0.3em;
    color: blue;
    font-size: 0.8em;
}

查看实际效果。

而 vertical-align 会影响行高（尝试将段落的 line-height 改为 1，并将 bottom: 0.5em 替换为 vertical-align: 0.5em），而简单地用 top 或 bottom 将所需元素向上或向下推一点，会让事情变得更容易和整洁。