HTML <sup /> tag affecting line height, how to make it consistent?

Question

line-height does fix it, but you might have to make it pretty large: on my setttings I have to increase line-height to about 1.8 before the <sup> no longer interferes with it, but this will vary from font to font.

One possible approach to get consistent line heights is to set your own superscript styling instead of the default vertical-align: super. If you use top it won't add anything to the line box, but you may have to reduce font size further to make it fit:

sup { vertical-align: top; font-size: 0.6em; }

Another hack you could try is to use positioning to move it up a bit without affecting the line box:

sup { vertical-align: top; position: relative; top: -0.5em; }

Of course this runs the risk of crashing into the line above if you don't have enough line-height.

sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

The trick is to set the <sup>'s line-height to 0. @Scott said to use normal, but this doesn't always work.

This means you don't have to change the line-height of surrounding text to accommodate the superscript text. I've tested this in IE7+ and the other major browsers.

I had the same problem and non of the given answers worked. But I found a git commit with a fix that did work for me:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

keep it easy:

sup { vertical-align: text-top; }

[font-size dependent on your individual type-face]

I prefer the solution suggested here, as exemplified by this jsfiddle:

CSS:

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.2em;
}

sub {
  top: 0.2em;
}

HTML:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

The beauty of this solution is that you can tailor the vertical positioning of the superscript and subscript, to avoid any clashes with the line above or below... in the above, just increase or decrease the 0.2em to suit your requirements.