CSS Forum

I've passively noticed over time how the height of inline elements do not seem to add up correctly. I recently did a search online for a CSS inline model but could not find anything. For my questions I have a reference page below...

Here are some of my questions that I'm looking for clarification on...

How come font-size: 10px; has text rendered 8px in height? When font-size is set to 14px it renders the text 10px.

Besides the missing 2px in height of the font itself what is the additional 2px of padding coming from if the border, margin, and padding are all set to 0px?

Why does line-height act as a margin for spans but act as a padding for paragraphs? Which is the correct behavior?

It seems that paragraphs have had inline-block display yet other elements still are not supported? I know paragraphs are supposed to be inline but if they are how come their width expands like a block element?

Here are the examples I've been using with Firefox 1.5, Opera 8.01, 8.52, and 9PR2.

Secondly, it sounds like what you're talking about is the line-height [w3.org], also known as leading [en.wikipedia.org]. Traditionally, line-height is the distance from the baseline [en.wikipedia.org] of one line of type to the next--this means that if (line-height == font-size), the ascenders in the second line will touch the descenders in the first. In cases where (line-height > font-size), there will be extra space.

All of this is further complicated in html by the need to render things in boxes (so, line-height becomes the measure of the box a line sits in rather than a measurement from a point on one line to a point on the next/previous one) and the vertical-align [w3.org] property.

Why does line-height act as a margin for spans but act as a padding for paragraphs? Which is the correct behavior?

What does this question mean? Line-height has no effect at all on a paragraph per-se, only on its contents... You might want to re-read the w3c's description of Inline-level elements and inline boxes [w3.org], but it's tough going.

It seems that paragraphs have had inline-block display yet other elements still are not supported? I know paragraphs are supposed to be inline but if they are how come their width expands like a block element?

Thanks for such a quick and detailed reply...I was going to add that I found font-size-adjust.

Basically my goal is to set the font-size to be rendered as so. The way I am measuring this is by taking a screenshot of the text in the browser, taking it over to a graphics editor, crop the text at the top and bottom of an uppercase letter (such as I) and removing all vertical spacing above the top and bottom most portions of where the text reaches.

So my new question is how do I make font-size: 12px actually render the font as 12px tall? In physical measurement the very top and the bottom of an uppercase I would vertically measure 12px.

It makes absolutely no sense at all to subtract vertical height with other attributes when the font-size is specifically declared.

My understanding of font-size-adjust is of course vague. Is it a ratio? Will it work or not work when I use it to make 12px fonts to be rendered as 12px with the same ratio (if it is a ratio) between various fonts or are we marching straight in to NS4/IE6 type territory?

Nope. Not in terms of the way font size is specified it isn't. As mentioned above, 12px means that the distance from the bottom of letters such as p, g, q and y to to the tops of letters such as t, f, A etc. is 12px. If you take a screen grab of some 12px Arial beside some 12px Verdana, you will find that each measures 12px.

What is definitely much larger in Arial than in Verdana is the x-height [en.wikipedia.org] of the letters. In Firefox at least--the only place I looked--the default line-height for Arial seems also to be 15px versus Verdana's 14px. This could also make a noticeable difference over a hundred lines or so of text.