上付き文字（sup）、下付き文字（sub）をcssで整える

上付き文字タグ（sup）をそのまま使うとブラウザによってずれるようです。
（ブラウザのデフォルト設定があるので）

対応方法

なので、cssで調整します。

↓こんな感じに整えます。

html

<p>30m<span class="supText">2</span></p>
<p>D<span class="subText">3</span></p>

＊上付き文字、下付き文字にクラスを付けます。

css

span.supText {
font-size: 75.5%;
vertical-align: top;
position: relative;
top: -0.1em;
}
span.subText {
font-size: 75.5%;
vertical-align: bottom;
position: relative;
top: 0.1em;
}

＊font-sizeは好きなサイズ、「top: 0.1em;」も好きな位置にする。
＊必ず「em」「%」などの相対値で指定する事。
（「px」などの絶対値だと、ブラウザの文字サイズ設定変更によって位置がおかしくなる）

ちなみに。。
vertical-align　の
super→上付き
sub→下付き　指定の値ですが。。

ex ↓css

span.supText {
vertical-align: super;
}
span.subText {
vertical-align: sub;
}

↓上付き文字が同じ文字サイズでただ位置が上がっただけになります。。

---