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

Question

If I have a <sup> tag in a multi-line <p> tag, the line with the superscript on it has a larger line spacing above it than the other lines, regardless of what line-height I put on the <p>.

Edit for clarification: I doesn't mean I have lots of <p>s, each which is on a single line. I have a single <p> with enough content in it to cause wrapping onto multiple lines. Somewhere (anywhere) in the text there may be a <sup> or <sub>. This affects the line height for that line by adding extra spacing above/below. If I set a larger line-height on the <p> this makes no difference to the problem. The line-height is increased, but the extra spacing still remains.

How can I make it consistent - i.e. all lines have the same spacing whether they contain a <sup> or not?

Your solutions must be cross-browser (IE 6+, Firefox, Safari, Opera, Chrome)

Solution 1

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.

Solution 2

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.

Solution 3

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;
}

Solution 4

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.

Solution 5

keep it easy:

sup { vertical-align: text-top; }

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

View more solutions

Comments

[Andrew Bullock]

i said in the question that this doesnt solve the problem. Ive added clarification incase you misunderstood

[Andrew Bullock]

vertical-align fixed it, thanks. Even a massive line-height 300%+ does not fix it in IE8, Chrome 3 or FF 3.5. I still get 1-2px of difference.

[Andrew Bullock]

yeah I understand if i need more room for one line, for consistency i need to add extra room to the others, thats obvious. What i'm saying is line-height doesnt fix it, this increases the space yes, but there is still extra space with the sup

[pavium]

Maybe there's a difference between browsers - after all, the answer you accepted begins 'line-height does fix it', but we don't know what browser bobince was using.

[Ric]

As mentioned this doesn't always work if the line height is too tight.

[Amit Patil]

@simPod: Same situation, vertical-align: bottom (though that doesn't get you as much as top) and then position:relative; with a positive top.

[Chris Krycho]

+1. As noted, this prevents conflicts with the other line-height attributes. It can still cause intersections with the previous line if the overall line-height is set to small, of course.

[Aktau]

fantastic solution, makes chromium not misbehave anymore! The simplest answer yet.

[All Bits Equal]

actually I'd prefer {vertical-align: super} because it prevents some display glitches with line-height in IE8 as far as I remember. I would try not to use positioning to often if there are better alternatives. Careless top positioning might result in cascaded problems later in the project.

[Matthias Hauert]

Just realized that this will affect non-default line-heights of the surrounding text. Use line-height: 100% in this case.

[ClarkeyBoy]

This works perfectly. Additionally, possible values for line-height I have found to be 0, 1, 1em & 100%. All of these certainly work in Chrome & Firefox.

[EBH]

Please provide an explanation with your code, so the OP can learn from it.

[Mshnik]

I also prefer this answer for my use case: This answer works on emails in Gmail, the accepted answer does not. stackoverflow.com/questions/21118072/…

[1.21 gigawatts]

font-size : 0.75em