Bergamot wrote:
Inside the borders, that extra space above and
below the text is part of the default line-height - space reserved for
character ascenders (e.g. Ñ) and descenders (y).
That's probably a helpful informal description, but it's not technically
quite correct.
Consider an element like <div>N</divwith border: solid 1px and with
padding not set (or, for definiteness, padding explicitly set to 0). A naive
assumption might be that the border touches "N" both at the top and at the
bottom. But as you note, it turns out that this would be pragmatically all
wrong.
But even if you consider <div>Ñy</div>, you probably see (depending on font
etc.) that there is still some space above the tilde and below the descender
of "y".
Next, if you set line-height: 1 (making line height equal to the size of the
font, i.e. the nominal height of the font), you will see variation: there
might still be spacing, or the tilde or the descender might cross the
border. This is simply a matter of font design.
There is fairly popular belief saying that font size is the overall height
of the font, including ascenders and descenders and diacritic marks. It is
second-best approximation to truth in this matter and surely much better
than most of what we see written about font size. But it really cannot be
the whole truth. A simple proof is that by character code standards,
diacritic marks can be stacked with no pre-set limitation, and apparently
you go out of bounds at _some_ point.
The truth is that font size is a property assigned to the font by the font
designer, normally expected to provide sufficient height for all characters
including the fancy stuff, but the designer may design otherwise. One can
also say that a font designer works inside a square, the em square, and
designs glyphs inside it but not necessary utilizing the full height (and
hardly ever the full width, for Latin letters at least) and, on the other
hand, feeling free to cross the limits occasionally when he decides so. A
typical example is the letter Å, A with a ring above, occurring in
Scandinavian languages. Due to the nature of the ring, the letter very often
extends beyond the "upper limit" of the font - and there might even be
another diacritic, like the acute, above the circle, in some languages.
When you have set line-height: 1 (which I mention for a frame of reference
only - it is almost always too small, but sometimes suitable when you really
know and understand your text and context and their stability) and padding:
0, then there is no space between a border and the font height, though of
course individual letters almost always consume less than the full height of
the font.
And of course, in a more common situation, there are different types of
spacing between, say, your letter "a" and the bottom and top border of the
box where it resides: spacing cause by the fact that "a" is not as tall as
the height of the font; the leading, i.e. spacing caused by line-height
being larger than 1 as it usually is and should be; and padding, if set to a
nonzero value.
--
Yucca,
http://www.cs.tut.fi/~jkorpela/ 
