Line height: 1 equivalent to 100%?

Question

Check out the following snippets first:

body { line-height: 1; } 

 <h1> Hello <br> world </h1> 

 body { line-height: 100%; } 

 <h1> Hello <br> world </h1> 

The top uses line-height: 1; and the bottom is line-height: 100%; . I thought they should be the same, and MDN seems to agree with me:

<number>

The value used is a unit without a <number> multiplied by the element's font size. The calculated value matches the specified <number> . In most cases, this is the preferred way to set the line height without unexpected results in case of inheritance.

<percentage>

Regarding the font size of the element itself. The calculated value of this percentage is multiplied by the size of the calculated element size.
Percentage and em may have unexpected results, see the Remarks section.

and in the "Notes" section:

Most often it’s convenient to set the line-height using the font shortcut, as indicated in the “Examples” section above.

However, in fact, they are different!

My question is: why are they different and I prefer <number> as suggested by MDN?

---

I am using Safari version 10.0.1 (12602.2.14.0.7).

Answer 1

The real reason is that the way they work is different, and this can be understood by looking at the W3C Specs for line height and inheritance . The following is the specification for row-by-row about dimensionless value ( <number> ) and percentage value.

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

<percent> - the calculated value of the property is the percentage times the size of the calculated element size . Negative values ​​are illegal

As BoltClock points out in his comment (correctly, as usual), inheritance always works the same way, and always the computed value gets inherited . The confusion with the wording was that I was referring to an older version of the specification, while the new one is very clear and uses the right words.

If a single value (number) is specified, the specified value for line-height is a number, which is also a calculated value. Thus, h1 (child) inherits a number equal to 1, but still you need to resolve this number to the actual line-height that you can use. Thus, the value used is calculated based on specifications by multiplying the inherited factor by the font size h1 (which is 2em = 32px) and sets the line-height to 32px .

For a percentage value, the calculated value for line-height at body is 100% of the body font size (which is 16px ) and therefore equal to 16px . Now, since this 16px is a computed value, the child of h1 inherits this value and uses it as is, because there is no need for additional permissions.

This is why there is a difference between the two fragments, since in one row the height for h1 is 16px and in the other 32px.

---

If we set line-height: 100% directly to h1 , then we will see that the outputs correspond, because now h1 calculates its own line height as 100% of 2em (or 32px), which is equal to 1 * its font size.

 h1 { line-height: 100%; } 

 <h1> Hello <br> world </h1>