Ben C said:
Line-height and vertical-align are the most obscure things in the whole
of CSS 2.1, and you got little or nothing wrong that I can see, but some
comments:
In a line of text, or text and pictures, there's an imaginary
rectangle that encloses all the things on the line. This rectangle
is called a line box. Line boxes stack vertically when text wraps.
How high these boxes are is determined by the line-height.
Line box height is a function of the font-size, vertical-align and
line-height of each of the inline boxes on the line, and is at least as
high as the line-height set on the container (unless you're in quirks
mode...).
Yes. I was *imagining* the following:
(1) The 4 main specified rules in CSS 2.1 at 10.8
(2) No default provided by a browser and no line-height set by an
author. Just to abstract them for a moment.
(3) Any default for vertical-align.
and then looking to see what might then naturally result. I
concluded that the line box would then just fit everything in, no
grace at top or bottom. That seemed to me a straightforward
commonsense handle.
Of course, browsers are smart and have defaults to give grace.
Given that there is set (by default or by author) a line-height
*equal to or bigger than* the naturally stingy minimum, this
alone, this actual line-height specification is the height of the
line box.
If you ask me setting line-height on the container to set a minimum
height for the line-boxes, as your examples are doing, is the most
intuitive way to use line-height (has anyone ever set line-height on
inline boxes, except just to prevent it being inherited so that they can
do vertical-alignment effects? If so, why?).
So perhaps it's not totally precise to say "is determined by". You could
say the height of a line box depends in a complicated way on the things
in it, but you can set a minimum by setting line height on the
container.
I was thinking, given one abstracts out the default grace as
explained above, that the line height is then very simply
determined:
"The line box height is the distance between the uppermost box
top and the lowermost box bottom."
But I am nowhere finished on all this. I find it interesting and
I have not included some drafts of some quixotic and even amusing
differences in interpretation between browsers under various
conditions.
Actually, thanks for your remark on the particular sentence.
While typing this, I realise it is not quite appropriate. "how
high these (line) boxes are" *is* the height of the line box. The
initial determination is something more complicated, either as
you mention, a natural combination of things, or as I explain in
this reply above, the "generous" line-height.
They are at least as tall as the tallest of the objects in them,
commonsensical enough. But this minimal height is not very
satisfactory when there are wrapped lines of text, there needs to be
more breathing space, more space above and below the content.
Default line-height is usually a bit more than the bare minimum required
for the things on the line. It's usually about 1.1 or 1.2 times the
font-size, and most browsers base it on the "line-gap" value built into
the font.
So for some fonts, you will find default line-height is 1.123 times
font-size, for others 1.234, etc.
Of course, yes. You will see how I am not going into these
issues, the focus being the difference between a united and an
un-united line height specification.