CODEWITHSUNDEEP
htmlcssfont-size
Ghasan غسان
Ghasan غسان

Reputation: 5857

Why is 1em shorter than the default font size?

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/

Upvotes: 9

Views: 1125

Answers (2)

peterh
peterh

Reputation: 1

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

image

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

If characters which have parts over it or below it are present, they will result in 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 a y, or the highest parts of a non-ASCII Ű character. These cause continuous 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 a yŰ into its content (but characters are also okay). You will see it clipped on both sides.

Upvotes: 10

web-tiki
web-tiki

Reputation: 103770

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>

Upvotes: 3

Related Questions