Why is 1em shorter than the default font size?

The typographical line-height of a text isn't surely the actual height of the rendered text in pixels:

The line-height css parameter of a text contains only the height between "caps height" and the "baseline". It is on most cases 1em on my experience and also on most non-standard sources of the net. But its standardized details are better described in @web-tiki 's answer.

If there are characters which have parts over it or below it, they will result a text whose height (in pixels) is bigger as the line height (in pixels).

The text can have small details which are below or over the standard text line. For example, the lowest part of an y, or the uppest parts of a non-ascii Ű character. These causes continously problems in the positioning.

If you don't set the div height, it will be by default auto, which mean, the whole content will be in it. If you specify the div height to the actual line size, without padding, border and margin, then some pixel of your text will maybe overflow. You only didn't see it, because the default value of the overflow css-parameter is visible.

Best test for that: create a div with the following settings:

#divId {
  height: 1em;
  line-height: 1em;
  overflow: hidden;
}

...and copy-paste an yŰ into its content (but characters are also okay). You will see it clipped on both sides.