What is the difference between decimal and percentage row heights

Question

(This question was originally mentioned in w3c schools, I fixed this link)

According to w3c , the CSS value of line-height can be set as follows:

<number> property value used is a number times the font size of the element. Negative values ​​are illegal. The calculated value matches the set value.

<percentage> calculated property value is the percentage times the size of the calculated element size.

So line height = font-size × number or line height = font-size × percentage ÷ 100% , which should be the same.

And the line height is inherited.

However, I noticed that nested elements that increase the font size lead to completely different line heights, as can be seen here:

Column C (blue) is what I expected.

See jsfiddle .

Column A, if you forgive this mashup of css syntax for the sake of brevity:

  div {line-height:140%;} > div > div «content» 

Column B:

  div {line-height:140%;} > div > div {line-height:140%} «content» 

Column C:

  div {line-height:140%;} > div > div {line-height:1.40} «content» 

Half way understanding

Thus, it looks like column A, the line height is calculated as the length (for example, pixels) and set to the outer div font-size . This computed length value is then inherited, so it looks compressed when the font size subsequently increases.

The specifications for both relate to the value multiplied by the font size. Thus, this refers to the font size of the element on which the line-height is set, and not the font size of the element that inherits the height of the line.

So, this halfway explains. But columns B, C differ by only 1.4 or 140%, which are the same. Sure?!

I would expect the behavior of blue column C, at least for columns B and C. (Although I think it's rather strange that this is not column A, but at least I understand that.)

I checked, and Firefox and Chromium do the same.

Can you explain?

Answer 1

The height of the lines in percent is calculated first, depending on the font size for this element. This calculated value is then inherited, previously baked by the descendants. The calculated value of the height of the decimal line on the other hand is the decimal value (this is what is meant by "setpoint"); what you see is the value used, which is "calculated" for each child based on its own font size after inheriting it. In CSS, these are calculated values, inherited , not used values.

Start with the container:

 .container { font-size:1rem; line-height:140%; } 

The container has a calculated font size of 1rem and a calculated line height of 1.4rem.

• This calculated row height is then inherited by column A. Column A has a font size of 1.2rem and a row height of 1.4rem.

  The same row height is inherited by a child of column A, so its font size is calculated to 1.44rem (based on column A), and its row height remains equal to 1.4rem.

• You redefine the row height of column B so that it gets its line-height:140% declaration line-height:140% . This percentage is calculated based on the font size of column B. This is 140% of 1.2rem, not 1rem, which results in a row height of 1.68 times.

  This value is then inherited by a child of column B. Its font size is calculated to 1.44rem and its row height is 1.68rem.

• You redefine the row height of column C with the declaration line-height:1.40 . Although the font size and row height of column C are calculated in the same way as the size of column B, what is inherited by its child is not 1.4 × 1.2rem = 1.68rem; it's 1.4 (ratio or raw percentage, if you want, but not length).

  Thus, the child of column C has a calculated row height of 1.4, as inherited from column C. This value is then used to calculate the height of the child row based on the native font size. Therefore, its used line height is 1.4 × 1.44rem = 2.016rem.

Eric Meyer has an excellent article on decimal and percentage line heights. Mine just turns out to be a bit more confusing explanation, but the principles are the same.