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

No.

The unitless values are calculated based on the element's font-size:

<number> (unitless) The used value is this unitless multiplied by the element's own font size. The computed value is the same as the specified . In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.

Conversely, percentage-based values merely adjust the line-height based on the calculated line-height. Thus, if you have a calculated line-height of 10px, it will convert to 14px if you use line-height: 140%.

Answer 2

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

<div class="box">
  <span style="line-height:1.8;"><span>some text here</span></span>
</div>

<div class="box">
  <span style="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. ^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;
}

<div class="box">
  <span ><span style="font-size:50px;">some text </span></span>
</div>

<div class="box">
  <span ><span style="font-size:50%;">some text </span></span>
</div>
<div class="box">
  <span ><span style="font-size:20px;">some text </span></span>
</div>

<div class="box">
  <span ><span style="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;
}

<div class="box">
  <span ><span style="font-size:50px;">some text </span></span>
</div>

<div class="box">
  <span ><span style="font-size:50%;">some text </span></span>
</div>
<div class="box">
  <span ><span style="font-size:20px;">some text </span></span>
</div>

<div class="box">
  <span ><span style="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.

Answer 3

See example..

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