Grow your CSS skills. Land your dream job.

Last updated on:

Prevent Superscripts and Subscripts from Affecting Line-Height

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. 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. I’d been tearing my hair out trying to do this. Thanks for sharing and for saving my remaining hair.

  6. Sarah
    Permalink to comment#

    Thanks for sharing! just saved my neck!

  7. I fucking love this site. Do a search for ‘superscript changing line height’, get here, where there are no accolades or talk at all but merely the simple, ruddy, working class snippet in all its ‘fuck off to conventional wisdom’ glory. Yayyyyyy wow I hope this doesn’t get approved

  8. isabel
    Permalink to comment#

    Thank you very much!!!! ;)

  9. Rick
    Permalink to comment#

    I love this one! :)

  10. Vijay
    Permalink to comment#

    This is brilliant. Thanks for sharing!!!

  11. Emma
    Permalink to comment#

    THANK YOU SO MUCH!

    I am totally of Alex Vance’s mindset in the comment above.

  12. Bill
    Permalink to comment#

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

  13. Bushwazi
    Permalink to comment#

    Have I told you lately that I love you.

    *But I only stalk you online!

  14. 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…

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".