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

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

htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions