HTML sup tag affecting line height how to make it consistent

Question

If I have a  lt sup gt  tag in a multi-line  lt p gt  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  lt p gt    Edit for clarification  I don t mean i have lots of  lt p gt s  each which is on a single line  I have a single  lt p gt  with enough content in it to cause wrapping onto multiple lines  Somewhere  anywhere  in the text there may be a  lt sup gt  or  lt sub gt   This affects the line height for that line by adding extra spacing above below  If I set a larger line-height on the  lt p gt  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  lt sup gt  or not   Your solutions must be cross-browser  IE 6   FF  safari  opera  chrome

User · Answer

The reason why the  lt sup gt  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

User · Answer

To make all lines taller  to look the same as the line with the superscript  define a larger line-height for the entire paragraph   lt p style  line-height 150   gt    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   lt html gt   lt head gt   lt title gt line-height lt  title gt   lt style gt  p       line-height   1 5em      width   25em     lt  style gt   lt  head gt   lt body gt   lt p gt Mary had a little lamb  its fleece lt sup gt 1 lt  sup gt  was white as snow   and everywhere that Mary went  the lamb lt sub gt 2 lt  sub gt  was sure to go   lt  p gt   lt  body gt   lt  html gt    And the lines are all the same height in FF3 0 14 and Konqueror  I can t speak for other browsers

User · Answer

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    lt span gt The following equation is perhaps the most well known of all   lt  span gt  lt span id  box  gt E lt sub gt a lt  sub gt    mc lt sup gt 2 lt  sup gt  lt  span gt  lt span gt    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  lt  span gt     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 · Answer

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  lt sup gt  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

User · Answer

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

User · Answer

I like Milingu Kilu s solution but in the same spirit I prefer  sup   vertical-align top  line-height 100

User · Answer

sup  sub     vertical-align  baseline    position  relative    top  -0 4em    sub      top  0 4em

User · Answer

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  lt sup gt  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

User · Answer

Answer from here  works in both phantomjs and in email-embedded HTML    x000D   x000D  Lorem ipsum  lt sup style  font-size  8px  line-height  0  vertical-align  3px  gt  amp reg  lt  sup gt  x000D   x000D   x000D

User · Answer

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

User · Answer

keep it easy   sup   vertical-align  text-top       font-size dependent on your individual type-face

User · Answer

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

User · Answer

amp sup1   amp sup2 etc  might do the trick  it s an HTML trick to superscript

User · Answer

Specially use this on newsletter -   lt sup style  font-size 9px  line-height 8px   gt  amp reg  lt  sup gt

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

Examples related to html

Examples related to css

Examples related to subscript

Examples related to superscript