HTML Dog
Skip to navigation

Superscript and Subscript

In the olden days, the sup and sub tags were used to present something in superscript (text above the line) or subscript (text below the line) but in this modern day and age we leave presentation up to CSS.

You could just use the CSS property vertical-align with the value super or sub or even a length to achieve rudimentary superscript and subscript, but the problem with this is that, in a paragraph, those lines with superscript or subscript text will alter the height of that line, resulting in an inconsistently spaced paragraph.

Relatively positioned subscript and superscript.

The way to get around this problem is to latch on to the portions we want to be either superscript or subscript and gently nudge them upwards or downwards (as well as making them a little smaller, as is the usual convention).

Step 1: The HTML

Let’s start by latching on to the relevant text:


<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>

Step 2: Vertically aligning

Now, to achieve the desired effect we can use the following 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;
}

See this in action.

Whereas vertical-align will mess about with the line-height (try changing the line-height of the paragraph to 1 and replacing bottom: 0.5em with vertical-align: 0.5em), simply pushing the required elements up or down a bit with top or bottom makes things much easier and neater.