Is line-height: 1.4 the same as line-height: 140%?

Question

Is using a line-height value of 1.4 the same as using a line-height value of 140%? In other words, can we consider unitless value the same as perce

Answer 1

There are not exactly¹ the same because of inheritance, here is a trivial example.

.box {
  display: inline-block;
  border: 1px solid green;
}

.box > span {
  font-size: 50px;
  border: 1px solid red;
}

.box > span > span{
  font-size: 50%;
  border: 1px solid red;
}

  some text here



  some text here

In the first case, the last span will have a value of line-height equal to 45px which is 1.8 * (50% of 50px) where 1.8 is the inherited value of line-height from its parent. In the second case, the last span will have a value equal to 90px which is 180% of 50px where the whole value is inherited from its parent.

In other words, the first span get the 1.8 then will consider its font-size while the second span will get the computed value from its parent and font-size will change nothing.

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.

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

Note how in both cases, the computed value isn't the same which make the inheritance different in both cases.

To better illustrate the percentage case:

.box {
  display: inline-block;
  border: 1px solid green;
}

.box > span {
  font-size: 50px;
  border: 1px solid red;
  line-height: 180%;
}

.box > span > span {
  border: 1px solid red;
}

  some text 



  some text 


  some text 



  some text 

If you inspect the elements, you can clearly see how in all the cases the value of the line-height is equal to 90px

Refer to this question to understand why the box height is getting bigger: Why would the height increase with a smaller font size?

If we consider unitless value we will have a different result:

.box {
  display: inline-block;
  border: 1px solid green;
}

.box > span {
  font-size: 50px;
  border: 1px solid red;
  line-height: 1.8;
}

.box > span > span {
  border: 1px solid red;
}

  some text 



  some text 


  some text 



  some text 

---

¹If we omit the inheritance fact and we consider only the element where we explicitly set the line-height then we can say that both are the same since they will give the same result for the concerned element.