Question

Adding a <sup> or <sub> tag can throw off the line-spacing of a text block, how can I prevent this?

Answer 1

Use CSS to override the default browser style:

sup, sub
{
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
}

sup { bottom: 1ex; }
sub { top: .5ex; }

Note that before version 7, IE treated vertical-align uniquely among other browsers. Using this approach, I need the underscore hack for IE 6 and below.

Before:

After:

Source