Line height without units

Question

I saw people using line height without specifying a unit, for example: line-height: 1.5;

What does the number represent? I guess this ratio, so what is it like em ?

Answer 1

line-height @Mozilla Developer Network has a very good explanation (and examples) that are easier to understand compared to the line-height CSS specification .

line-height may have the value specified in one of the following ways.

 line-height: normal | <number> | <length> | <percentage> 

In your case, you are using <number> , which is described as:

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

Answer 2

Yes, this ratio: 1.5 means 1.5 times the font size of the element. Thus, this means the same as 1.5 or 150%, but with one important exception: in inheritance, when a pure number is used, the number is inherited, not the calculated value.

So, if you have an element with a font size of 24pt, line-height: 1.5 sets the line height to 36pt. But if the element has a child element, that is, an internal element with a font size of 10pt and without any line height installed on it, then the child will inherit the line-height value of 1.5, which means 15pt for this element. If, on the other hand, the line height was set to 1.5em or 150% , then the child would inherit the calculated value of 36pt, creating a grotesque line spacing.

Technically, it’s hidden in

Answer 3

See the corresponding spec @ W3C :

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.

So, as you may have guessed, this relation also refers to the current font-size .

Answer 4

line-height: X; basically converted to line-height: (X*100)%;

line-height: 1; same as line-height: 100%;

Similarly

line-height: 1.5; same as line-height: 150%;

---

Where line-height: X%; means X% of the line height of the currently installed font and the size for the element.

For example, if the line length for an element is in accordance with the currently set font and size is 24px , line-height: 150% will make its line height 36px . And so on.

Answer 5

You can also use rem to use the root em size instead of the current font size.

So, this is how the line height is two times the current font size

 font-size: 2em; font-size: 2; 

But this is a line height twice the size of the ROOT font

 font-size: 2rem;