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.

Example:

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; 
  bottom:1ex;
}

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 {
  line-height:0;
}

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

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

One 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 *