2

Run the following code snippet:

span.text {
  border: 1px solid blue;
  line-height: 1;
}

span.box {
  display: inline-block;
  border: 1px solid red;
  height: 1em;
}

span.true-height {
  display: inline-block;
  height: 1.2em;
  width: 1em;
  background: green;
  vertical-align: text-bottom;
}
<span class="text">This box is taller than 1em</span>
<span class="box">1em</span>
<span class="true-height"></span>

You'll notice that the two spans are of different heights. A span containing nothing but text (with line-height: 1) is taller than 1em.

Is the difference between the "true font height" and em's consistent among fonts? In the example above the "true font height" is 1.2em. Is this a product font file formats, or just particular to this one font?

Seph Reed
  • 8,797
  • 11
  • 60
  • 125
  • well `line-height` calculate entire font height and `height` ignores the actual height of the font. You can see the same by selecting both `.text` and `.box`. The selection overflows from the box in `.box`. – Kunal Tanwar Aug 27 '21 at 19:16
  • 3
    related: https://stackoverflow.com/q/55978130/8620333 – Temani Afif Aug 27 '21 at 20:08

1 Answers1

1

No. The CSS spec states that for the initial line-height of "normal" it "Tells user agents to set the used value to a "reasonable" value based on the font of the element"

What that means is that browsers use several of the font metrics to choose the line-height of the text. Not only will it differ between fonts, but different browsers may choose different line-heights for the same font.

Alohci
  • 78,296
  • 16
  • 112
  • 156