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!
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.
@Meitar Moscovitz – thank you very much
Man, I’ve never seen anything like that
I’ve learned something new today!
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
@Ahmad Alfy – Glad the presentation was helpful in some way
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.
super useful!
Ollie: good tip!
Ben Boyle: thanks for feedback!
Great Russ.
As always a superb explanation.
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?
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.
[...] 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’; [...]
Awesome! Thanks so much for that really helpful lecture! I certainly gained a lot from it, and will pass it on!
[...] 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) [...]
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…
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”
Great job on this topic. Organized in a way to follow the different options and I like your graphics.
Many compliments for this beautiful presentation! Useful the message, right the method! Thanks
Thank you. Quite revealing. And a Very nice presentation.
These slide shows are so very helpful. Thank you.
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
Thanx for sharing. A useful instruction.