Is Line-height: 1.4 The Same As Line-height: 140%?

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 percentage value?

Solution 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;
}

<divclass="box"><spanstyle="line-height:1.8;"><span>some text here</span></span></div><divclass="box"><spanstyle="line-height:180%;"><span>some text here</span></span></div>

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.

<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.

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;
}

<divclass="box"><span ><spanstyle="font-size:50px;">some text </span></span></div><divclass="box"><span ><spanstyle="font-size:50%;">some text </span></span></div><divclass="box"><span ><spanstyle="font-size:20px;">some text </span></span></div><divclass="box"><span ><spanstyle="font-size:5px;">some text </span></span></div>

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;
}

<divclass="box"><span ><spanstyle="font-size:50px;">some text </span></span></div><divclass="box"><span ><spanstyle="font-size:50%;">some text </span></span></div><divclass="box"><span ><spanstyle="font-size:20px;">some text </span></span></div><divclass="box"><span ><spanstyle="font-size:5px;">some text </span></span></div>

---

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.

Solution 2:

See example..

<divstyle="background:green;"><pstyle="line-height:1.4;">This is demo Text. <br>This is demo Text.</p></div><divstyle="background:green;"><pstyle="line-height:140%;">This is demo Text. <br>This is demo Text.</p></div>