Why is the font size not equal to the 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 the height and width of the content field are not equal to the font size. Why there is a gap between the letter H and the border, as in the next output.

Exit

Answer 1

This is because this is not how fonts are created. For example, the letter a contains a sufficient block of spaces at the top, well, the same thing happens for this H. You can see this when you actually select the text. Form H is not the outline of what forms the character. Its an imaginary drawer defined by a font designer.

Fonts are not just shapes, they contain shapes. A font designer spends time thinking about how a font should look on multiple lines, so they also calculate the spacing between their fonts.

This leads to a less predictable type, but a more soothing look. This is why many fonts will be adjusted to look right, but mathematically it is not. The best example is to see how rounded letters actually protrude from below, simply because our eyes otherwise think it is wrong. This means that your box also does not start from the baseline.

Check out this image if it helps (and yes, there are things that can be adjusted as a line-height, but essentially this image shows you the box you counted and the box that is actually there):

In short, fonts are designed to be clear and difficult to compute.

Update: another image

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

Answer 2

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

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

try it.