|Inline Model Height Discussion|
A critical pixel precise understanding of line height/font-size
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.
|<?xml version="1.0" encoding="UTF-8"?> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<title>CSS Inline Model</title>
padding: 0px 0px 0px 20px;
padding: 0px 0px 0px 40px;
<p>P - THIS P'S FONT-SIZE IS SET TO 14PX BUT RENDERS AS 10PX.</p>
<p class="p2">P - SAME AS ABOVE BUT WITHOUT LINE-HEIGHT DECLARED.</p>
<span>SPAN - 14 PX NORMAL SPAN RENDERED 16PX HIGH WITH FONT-SIZE RENDERING 10 PX IN HEIGHT.</span>
<span class="s1">SPAN ONE</span><span class="s2">SPAN TWO</span>
<span class="s1">SPAN ONE</span>
<span class="s2">SPAN TWO</span>
<span class="s2">SPAN TWO</span>
Sounds as though a review of some basics is in order first:
|How come font-size: 10px; has text rendered 8px in height? When font-size is set to 14px it renders the text 10px. |
Where are you measuring from? Type is measured from the tops of the ascenders to the bottoms of the descenders [wiu.edu]. Add some lower-case letters to your examples, and you'll see this in action.
|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? |
First, top and bottom margins do not apply to inline elements [w3.org]:
|w3c: These properties have no effect on non-replaced inline elements. |
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? |
Not according to the specs -- html 4.01 strict [w3.org] html 4.01 transitional [w3.org] xhtml strict [w3.org] xhtml transitional [w3.org] -- they all list p as a block level [w3.org] element:
<!ENTITY % block
"p ¦ %heading; ¦ div ¦ %lists; ¦ %blocktext; ¦ fieldset ¦ table">
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?
Just my personal observation, but I seem to have better luck using em's instead of pixels for fonts.
|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. |
a) That depends on which font you are using
b) 12px!= 12px height
___________________________________________________TOP OF TEXT
·¦/·····················\··/······/················BOTTOM OF TEXT
12px is measured from top to bottom, including any ascenders/descenders. But, 12px Verdana is not the same as 12px Times New Roman or 12px Wide Latin.
You simply have to figure it out for each font.
But, all that is explained in great detail, along with examples, in the link provided by bedlam: [wiu.edu...]
In fact, 12px Verdana is about 20% bigger than 12px Arial....
|In fact, 12px Verdana is about 20% bigger than 12px Arial.... |
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.