HTML Dog
Skip to navigation

Subscript and superscript

Using positioning as an alternative to the vertical-align property.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Superscript and subscript</title>
	<style>
		body { font: 100% "Times New Roman", Times, serif }
		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;
		}
	</style>
</head>
<body>
	<p>My name is Doctor Womac and I am going to teach you all about chemical formulae. A chemical formula is a way to describe the chemical elements that make up a particular chemical compound. It consists of chemical symbols to covey the elements and numbers to show the number of atoms of each element. H<span class="atoms">2</span>SO<span class="atoms">4</span> is the chemical formula for sulphur for example. The charge of an ion can be displayed in superscript, such as Au<span class="charge">2+</span>. This concludes my lesson. I must rush off home now because I have a problem with some radioactive phosphate.</p>

	<!-- Link back to HTML Dog: -->
	<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>

Output

View original