By default subscript (<sub></sub>) and superscript (<sup></sup>) tags are styled with vertical-align: sub, respectively vertical-align: super by most browsers.
However, without adaptations, this will probably break your line-heights.
A common suggestion Show archive.org snapshot is to style those two tags accordingly:
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em; /* can be adapted according to preferences */
}
sub {
top: 0.4em; /* can be adapted according to preferences */
}
This works and looks good in all relevant browsers. However, it does not work in all relevant e-mail clients, because
Gmail, and Outlook don't support the top-property
Show archive.org snapshot
(as of December 2022)
A good workaround that works in all relevant e-mail clients is to simply set the line-height to 0.
sup, sub {
mso-line-height-rule: exactly;
line-height: 0;
}
Make sure to include mso-line-height-rule: exactly. Otherwise,
MS Outlook will treat your line-height as a minimum
Show archive.org snapshot
and may increase it to its own liking.
