Why is 1em shorter than the default font size? - html

Question

I was doing some experiments, and then I ran into this issue. I sat a div's height to 1em, and I expected the div to contain the whole height of the text within, but it did not. 1em is my browser is 16px.
When I did not specify the div's height, it successfully contained the whole height of the text, and when inspected, it turned to be of height 19px.
Is my understanding of em wrong, as I thought it should represent the default font height of the browser.
div {
margin: 0;
padding: 0;
}
.first {
height: 1em;
background: green;
}
.second {
background: orange;
}
<div class="first">سلامًا Say I Wantأًّ</div>
<br />
<div class="second">سلامًا Say I Wantأًّ</div>
https://jsfiddle.net/9t43kyu2/1/

Answer 1

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.

Answer 2

The fact that the second div is higher is because of the default line-height property. It's default value is normal.
normal
Tells user agents to set the used value to a "reasonable" value
based on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.[...] [source w3.org]
This makes your second div ~=1.2em high depending on your user agent. You can set it's line-height:1em; to see the difference :
div {
margin: 0;
padding: 0;
}
.first {
height: 1em;
background: green;
}
.second {
background: orange;
line-height: 1em;
}
<div class="first">سلامًا Say I Wantأًّ</div>
<br />
<div class="second">سلامًا Say I Wantأًّ</div>