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, irregardless of what line-height I put on the <p>.
Edit for clarification: I don'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+, FF, safari, opera, chrome)
This question is related to
html
css
subscript
superscript
I like Milingu Kilu's solution but in the same spirit I prefer
sup { vertical-align:top; line-height:100%; }
Specially use this on newsletter -
<sup style="font-size:9px; line-height:8px;">®</sup>
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.
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've been using line-height: normal for the superscript, which works fine for me in Safari, Chrome, and Firefox, but I'm not sure about IE.
I prefer to use length on the vertical-align. This aligns the baseline of the element at the given length above the baseline of its parent.
sup {
font-size: .83em;
vertical-align: 0.25em;
line-height: 0;
}
To make all lines taller, to look the same as the line with the superscript, define a larger line-height for the entire paragraph
<p style='line-height:150%'>
or whatever value gives the effect you desire.
It may look strange, but that's how you described your requirements.
EDIT: In order to make all lines look the same when only one needs more vertical space than the others, ALL lines in the paragraph will have to be taller.
This, as I said, may not an attractive solution. Maybe something can be done with a span making just the text with the sub/superscript smaller, apart from that I don't believe what you want can be achieved. But I'd like to see someone else's solution.
EDIT2: Incidentally, I've tried a small html file containing
<html>
<head>
<title>line-height</title>
<style>
p {
line-height : 1.5em;
width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow,
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>
And the lines are all the same height in FF3.0.14 and Konqueror (I can't speak for other browsers)
The reason why the <sup> tag is affecting the spacing between two lines has to do with a number of factors. The factors are: line height, size of the superscript in relation to the regular font, the line height of the superscript and last but not least what is the bottom of the superscript aligning with...
If you set... the line height of regular text to be in a "tunnel band" (that's what I call it) of 135% then regular text (the 100%) gets white padded by 35% of more white. For a paragraph this looks like this:
p
{
line-height: 135%;
}
If you then do not white pad the superscript...(i.e. keep its line height to 0) the superscript only has the width of its own text... if you then ask the superscript to be a percentage of the regular font (for example 70%) and you align it with the middle of the regular text (text-middle), you can eliminate the problem and get a superscript that looks like a superscript. Here it is:
sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}
keep it easy:
sup { vertical-align: text-top; }
[font-size dependent on your individual type-face]
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;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}
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">®</sup>¹, ² etc. might do the trick. it's an HTML trick to superscript
Source: Stackoverflow.com