sup（上付き文字）・sub（下付き文字）のcssでの指定方法

初歩的なことですがたまにどっちがどっちだったか、指定法をど忘れしてしまうのでメモ。
上付き・下付きがどんなものかというとこんなかんじです。↓

みれば「あ～（笑）」ってかんじですよね。

上のはこんなかんじで書いてます。

HTML

100m<sup>2</sup>
CO<sub>2</sub>

CSS

sup {
	font-size: 70%; //お好きなサイズに
	vertical-align: top;
	position: relative;
	top: -0.1em; //お好きな位置に
}
sub {
	font-size: 70%; //お好きなサイズに
	vertical-align: bottom;
	position: relative;
	bottom: -0.1em; //お好きな位置に
}

上記ではvertical-align: top or bottomで指定していますが
vertical-alignには、上付き・下付き用の指定もあります。

CSS

sup {
	font-size: 70%; //お好きなサイズに
	vertical-align: super;
}
sub {
	font-size: 70%; //お好きなサイズに
	vertical-align: sub;
}

位置を指定しなくても移動してくれています。
見た目はこんなかんじ。

htmlの書き方は一緒です。