Why is 1 times smaller than the default font size?

Question

I did some experiments and then I came across this problem. I set the height of the div to 1em , and I expected the div to contain the entire height of the text inside, but that is not the case. 1em my browser is 16px .

When I did not specify the height of the div , it successfully contained the entire height of the text, and when checked, it became 19px high.

I understand that em misunderstands, 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 typographic line-height text is the undefined height of the displayed text in pixels:

The line-height css parameter of the text contains only the height between the "header height" and the "baseline". This is in most cases 1em in my experience, as well as for most non-standard network sources. But its standardized details are better described in the @ web-tiki answer .

If there are characters that have parts above or below it, they will give text whose height (in pixels) is greater than the height of the line (in pixels).

The text may contain small details that are below or above the standard text line. For example, the lowest part of y or the strongest parts of the non-ascii character. This leads to constant problems in positioning.

If you do not set the height of the div, it will be auto by default, which means that it will have all the content. If you specify the height of the div for the actual line size, without padding, border and margin, then some pixel in your text may overflow. You just did not see it, because the default value of the overflow css parameter is visible .

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

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

... and copy-paste yŰ into your content (but the characters are ok too). You will see it on both sides.

Answer 2

The fact that the second div is higher due to the default line-height property . The 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 using the value "normal" between 1.0 and 1.2. [...] [ source w3.org ]

This makes your second div ~=1.2em high depending on your user agent. You can set it 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>