Here’s a problem I came across for the first time the other day. If you code CSS / XHTML, you most likely are familiar with the Superscript <sup></sup> and Subscript <sub></sub> tags. While coding a site I used the Superscript tag, but I noticed a problem when viewing the page in browsers. The problem was that by pushing the text above the line (Superscript), the spacing in between the lines (line-height) was uneven; the Superscript characters were pushing the line of text it was in further away from the line above it.
Example:
Here is an example of how browsers push the lines of text apart when you use a SuperscriptTM in your XHTML. Notice how the lines of text have different spacing between them. Keep reading to find out the solution to this problem.
To fix this problem, set the line-height of the Superscript (or Subscript) to zero in your CSS. Here is the code you need.
sup, sub {line-height:0px}
Here is an example of how the spacing is now the same between the lines of text after setting the SuperscriptTM line-height to zero in your CSS. A simple solution to make your text look uniform.
