Remove Additional Line Spacing Added Because of <sup> Superscript HTML Tag

Superscript <sup> tags in HTML can make line spacing all different in a text. A line of CSS will make <sup> tags unobtrusive.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu viverra felis. Donec tincidunt lectus enim, pellentesque tempor enim convallis vitae. Suspendisse potenti. Maecenas erat nisi, lobortis eu condimentum suscipit®, vulputate sit amet turpis. Sed aliquam tincidunt condimentum. Integer gravida nunc mollis, venenatis erat commodo, dictum odio©.

WordPress adds this code to theme’s CSS to deal with that problem:

sup {
  height: 0; 
  line-height: 1; 
  position: relative; 
  vertical-align: baseline; 

This is probably good for previous Internet Explorer versions. I found another solution, that must be tuned for your text sizes and line heights:

sup {
  display: inline-block;
  margin-top: -8px;
  position: relative;

Or even simpler:

sup {

Last one works in all latest browsers, but doesn’t work in Internet Explorer 7. Not a big problem nowadays.

This entry was posted in CSS CheatSheets and tagged . Bookmark the permalink.

1 Response to Remove Additional Line Spacing Added Because of <sup> Superscript HTML Tag

  1. Blanche says:

    I’m truly enjoying the design and layout of
    your blog. It’s a very easy on the eyes which makes it much more
    enjoyable for me to come here and visit more
    often. Did you hire out a designer to create your theme? Superb work!

Leave a Reply

Your email address will not be published. Required fields are marked *