Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

is line-height:1 equivalent to 100%?

Tags:

css

Please take a look at the following snippets first:

body {
  line-height: 1;
}
<h1>
  Hello <br> world
</h1>

body {
  line-height: 100%;
}
<h1>
  Hello <br> world
</h1>

The upper one uses line-height: 1;, while the lower one uses line-height: 100%;. I thought they must be identical, and MDN seems to agree with me:

<number>

The used value is this unitless <number> multiplied by the element's font size. The computed value is the same as the specified <number>. In most cases this is the preferred way to set line-height with no unexpected results in case of inheritance.

<percentage>

Relative to the font size of the element itself. The computed value is this percentage multiplied by the element's computed font size.
Percentage and em values may have unexpected results, see "Notes" section.

and in the "Notes" section:

It is often more convenient to set line-height by using the font shortcut as stated in the "Examples" section above.

However, actually, they are different!

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


I'm using Safari Version 10.0.1 (12602.2.14.0.7).

like image 827
nalzok Avatar asked Oct 29 '16 07:10

nalzok


People also ask

What does line height 1 mean?

For example, the value 1 specifies line height as one times the size of text and the value 2 specifies line height as two times the size of text. Negative values are not allowed. <length> : It is used to calculate the line box height.

What is meant by line height?

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

How much is line height normal?

Body text (your normal paragraph text) should have a line-height of 1.4–1.6, give or take.

How do you calculate line height?

For the optimal readability and accessibility, you should go with140 – 180% line height (this is the space around a line of text). This means if your font size is 16pt, your line height should be at least 16 x 1.4 = 22.4pt (140%), or 16 x1. 8= 28.8pt (180%) maximum value.


1 Answers

The real reason is that the way they work is different and it can be understood by having a look at the W3C Specs for line-height and inheritance. The below is what the spec for line-height says about the unitless value (<number>) and the percentage value.

<number> - The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.

<percentage> - The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal

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

When unitless value (number) is specified, the specified value for line-height is the number which is also the computed value. So, h1 (child) inherits the number which is 1 but it still needs to resolve this number into an actual line-height that can be used. So, the used value is calculated based on specs by multiplying the inherited factor with the h1 element's font-size (which is 2em = 32px) and sets line-height as 32px.

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

This is the reason why there is a difference between the two snippets as in one the line height for the h1 is 16px and in another it is 32px.


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

h1 {
  line-height: 100%;
}
<h1>
  Hello <br> world
</h1>
like image 78
Harry Avatar answered Dec 02 '22 04:12

Harry