CSS line-height – a simple step-by-step presentation

Date: 7 July 2009
Author: Russ Weakley

Here is another presentation I gave at a company training session recently – this time on CSS Line-height (which is far more complex than it first appears). A simple, step-by-step presentation on CSS line-height covering how to apply various line-height values, as well as line-height and the inline box model. Hope you find it useful!

Comments so far

  1. This is a fantastic slideshow presentation. I’m impressed by how clearly you managed to explain line-height using simple language and even simpler examples. Seriously well done.

  2. Russ says:

    @Meitar Moscovitz – thank you very much :)

  3. Ahmad Alfy says:

    Man, I’ve never seen anything like that :D
    I used to use percentages for the body and always wondered why it’s the same for all (p,h1,h2…) although their size is different!
    Thanks to you :) I’ve learned something new today!

  4. Russ says:

    @Ahmad Alfy – Glad the presentation was helpful in some way :)

  5. Ollie says:

    And if you don’t want to mess with IE, you can do like this:

    .searchform { …styling… }
    .searchform * { vertical-align: middle; }
    .searchform input.text { …styling… }
    .searchform input.submit { …styling… }

    Very handy if you have a lot of inputs and images on the same line.

  6. Russ says:

    Ollie: good tip!
    Ben Boyle: thanks for feedback!

  7. Maujor says:

    Great Russ.
    As always a superb explanation.

  8. Kaashif says:

    Thank you!

    Just what I could have hoped for. A clear and concise but complete presentation. Most CSS tutorials give you little bits, making you search countless google pages and many more articles to get the complete picture. But this presentation takes you from start to finish, covering most of the bases, so great job!

    One question, what about using a relative length value like em for line height. Descendant elements with inherit the 2em and have line height relative to their font size?

  9. Russ says:

    Maujor: Thank you. :)

    Kaashif: If you use em units for line-height, they will operate like percentage units. The unit value is calculated and the calculated value is passed down to children (1.2em is like 120%). As an example, 1.2 x 16px = 19.2px. This 19.2px is inherited by child elements.

  10. [...] Weel, here goes. A class, superb article on CSS line-height. var addthis_pub = ‘martin@docuview.co.uk’; var addthis_brand = ‘DocuView’;var addthis_language = ‘en’;var addthis_options = ‘email, print, favorites, digg, delicious, twitter, technorati, linkedin, google, facebook, reddit, live, stumbleupon, more’; [...]

  11. Kevin says:

    Awesome! Thanks so much for that really helpful lecture! I certainly gained a lot from it, and will pass it on!

  12. [...] Max Design – standards based web design, development and training » CSS line-height – a simple step-by-step presentation A simple, step-by-step presentation on CSS line-height covering how to apply various line-height values, as well as line-height and the inline box model. Hope you find it useful! (tags: http://www.maxdesign.com.au 2009 mes6 dia16 CSS line-height presentation apresentação blog_post) [...]

  13. tips says:

    Hi there, I must say that you have done a wonderful job on your site and I thoroughly enjoyed my stay here, I thank you for sharing it with me…

  14. thanx for sharing- and improving my css knowledege. The presentation makes fun to follow, this is a good way to present information and “how to ´s”

  15. Pat Z. says:

    Great job on this topic. Organized in a way to follow the different options and I like your graphics.

  16. Alfredo says:

    Many compliments for this beautiful presentation! Useful the message, right the method! Thanks

  17. Thank you. Quite revealing. And a Very nice presentation.

  18. marvin says:

    These slide shows are so very helpful. Thank you.

  19. Tarun says:

    Wow..what a find!

    The CSS line-height was always a fuzzy area to me and I never clearly understood any of those ‘vertical-rhythm’ layouts. Your wonderful slide-deck has helped me tremendously

  20. Thanx for sharing. A useful instruction.