Prevent Superscripts and Subscripts from Affecting Line-Height

Last updated on:
sup, sub {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}
sub { top: 0.4em; }

See here for complete reference and demo.

Comments

  1. rob Jones
    Permalink to comment#

    perfect!

    just saved me a tonne of work

  2. royler
    Permalink to comment#

    YAY!

  3. Rima
    Permalink to comment#

    Thank you so much! I tried several other options I had found and none worked. Thank you for your genius and generosity. Deep bow.

  4. Tom

    Thank you!

  5. Roy Tait
    Permalink to comment#

    I’d been tearing my hair out trying to do this. Thanks for sharing and for saving my remaining hair.

  6. isabel
    Permalink to comment#

    Thank you very much!!!! ;)

  7. Bill
    Permalink to comment#

    Thanks a tonnnnnn!!!!!!!!!!!!!!!!!!

  8. Sébastien
    Permalink to comment#

    Hi,

    I knew this css hack cause it’s already in the starter theme for Drupal I’m using (omega) but when the superscript is underlined, it doesn’t work well (or maybe depends on the font used, mine was “Nunito” from google fonts).

    I’ve found a solution from a post on stackoverflow (http://stackoverflow.com/questions/16835280/superscript-underline-moves-up-with-text/20671391#20671391) but doesn’t take the text color in consideration to build the line nor place it as a regular text-decoration:underline will.

    As I needed a solution for one of my clients, I’ve made a small jQuery fix you can also try: https://github.com/webastien/superscript-fixer

    If it can save time and prevent headaches…

  9. Jeff
    Permalink to comment#

    Thank you! This was exactly what I needed. I’ve added it to my new and growing CSS bag of tricks, and I noted this page in a comment so I’ll always remember where I got it — and so will anyone else I pass it along to.

    Thanks again!

  10. Niamh
    Permalink to comment#

    Really helpful with additional comments below for more complex issues. Great! Thanks!

  11. Valentin

    Thanks for the tip, really useful. I add that if you increase the font size too much, the line height moves again, so the solution I found is just to add

    sup {
      line-height: 0;
    }
    
  12. Dave Burton
    Permalink to comment#

    Thank you, Valentin!

    I’ve been using this hack for a long time, but today I noticed that subscripts were once again (or still??) slightly affecting line spacing, in both Chrome and IE 11 (but not in Firefox). Adding your “line-height:0” fix solved it:

    p {font:normal normal 11pt Verdana,Arial,sans-serif; line-height:1.3em;}
    sub {vertical-align:baseline; position:relative; top:0.3em; line-height:0;}

    Of course, when we do that we’re assuming there will always be other (non-subscript) text on every line, to establish the correct line spacing. But I didn’t really like that assumption, so I experimented with other line-spacing values, and I was very surprised to find that “100%” works just as well as “0”:

    p {font:normal normal 11pt Verdana,Arial,sans-serif; line-height:1.3em;}
    sub {vertical-align:baseline; position:relative; top:0.3em; line-height:100%;}

    In fact, anything up to 147% (in Chrome version 47.0.2526.106 m) or 163% (in IE version 11.0.9600.18124 / 11.0.26) seems to work. I don’t understand why, but it does.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed