During my experimentation, I encountered an issue. I set the height of a div to 1em, expecting it to contain the entire text within. However, it did not. In my browser, 1em is equivalent to 16px.
On not specifying the height of the div, it successfully contained the full height of the text, measured at 19px when inspected.
I had thought that em represented the default font height of the browser. Was my understanding incorrect?
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>