Line heights

Silver Firefly

Silver Firefly

Senior Member
Hi folks!

I'm just wondering when the browser calculates the line height from a CSS stylesheet, where does it calculate from? Like where is the starting point?

I'll demonstrate what I mean:

If you look at "Weblog" for example, you'll see that the "g" has a tail. I think that the line height is divided pretty much in two. So if I were to have "Weblog" sized at 16px, and the base line height is set at 24px (16*1.5), then there should be 12px of space above and below the word "Weblog," right? But my problem is, does the browser add that 12px of space below "Weblog" where the tail of the "g" ends, or does it start at the baseline (where the red zone starts)?

line-height-diagram.jpg


This typography stuff is confusing to say the least... :confused:
 
I don't actually know the answer, but I assume if you had text size 16px, line height 24px that it would display the text and center it vertically within the 24px (basically having 4px above and below, in most cases).
 
Thanks for the replies.

I've been testing what Fred says and it looks like it's correct, at least in Photoshop. Hopefully it's the same in browsers.
 
Well you'll have some hell with IE and any kind of line heights and <br>'s etc but the other browsers should respond properly :)
 
Its handling of line-heights isn't to do with standards compliancy, it's more to do with the fact it's a heap of s*it.
 
Harry said:
Its handling of line-heights isn't to do with standards compliancy, it's more to do with the fact it's a heap of s*it.
Click to expand...

I literally LOL'd when I read that.
Considering I've just spent a few hours this morning, trying to get IE7/IE8 to view a flash file - to no avail!
IE is gay. End of lol
 
You must log in or register to reply here.
Back
Top