Why doesn't font-size equal width and height in CSS?

Question

I have the following HTML code:

<p id="main">
    H  
</p>

and the following CSS:

p {
  border-style: solid;
  border-color: black;
  border-width: 1em;
  font-size: 1em;
  height: 1em;
  width: 1em;
  padding: 0em;
}

Why doesn't the height and width of content box equal the font-size. Why is there a gap between the letter H and the border as in the following output.

Output

Answer 1

It's because thats not how fonts are designed. For example, the letter a contains quite a block of whitespace at the top, well, the same thing happens for that H. You can see it when you actually select text. The shape of the H is not the outline of what forms the character. Its an imaginary box defined by the font-designer.

Fonts are not just shapes, they are contained shapes. A font designer spends time thinking about how the font should look on multiple lines, so they calculate some spacing in their fonts as well.

This results in less-predictable type, but more soothing-to-the-eye type. Thats why many fonts will be adjusted to look just right, but mathematically they aren't. The best example is to see how rounded letters actually protrude from the bottom, simply because our eyes otherwise see it as wrong. This means that your box doesn't start at the baseline either.

Check this image if it helps (and yes, there are things that can be adjusted like line-height, but in essence this image show you the box you thought you had and the box that is actually there):

In short, fonts are designed to be legible and not easily computable.

Update: Another image

This link has died. RIP, link

Just the add, @Paulie_D has a great illustration in the comments to this question, and for future reference it might also be good to have a look at it: http://www.smashingmagazine.com/wp-content/uploads/2010/05/type-002.gif