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

Andrew_Bullock_28543 0
Viewed 123420

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)

subscript superscript css html
16 Answers

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.

user_40708480

I only needed to change the default <sup> behavior in one section of the page, so I applied a class there. Also for me vertical-align: top worked just fine, goosed up about 4 pixels.

sup.my-class {
    vertical-align: top;
    position: relative;
    top: -4px;
}
user_14707980

Answer from here, works in both phantomjs and in email-embedded HTML:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>

user_4998090

Here’s what I have working:

<div>
 <span>line</span><br/>
 <span>span styled with vertical align super</span><span style="vertical-align:super;">1</span><br/>
 <span>line</span><br/>
 <span>same as before but line height set to 0</span><span style="vertical-align:super; line-height:0; font-size:.75em">1</span><br/>
 <span>line</span><br/>
 <span>now using sup tag and sup class with line height 0</span><sup style="line-height: 0">1</sup><br/>
 <span>line</span>
</div>
user_4410160
Related