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

时光总嘲笑我的痴心妄想 提交于 2020-04-06 03:44:09

问题


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?


回答1:


There are not exactly1 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>

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




回答2:


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



来源:https://stackoverflow.com/questions/60106350/is-line-height-1-4-the-same-as-line-height-140

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!