line-height:1.4是否与line-height:140％相同? [英] Is line-height: 1.4 the same as line-height: 140%?

问题描述

使用line-height值1.4是否与使用line-height值140％相同?换句话说，我们可以认为无单位价值等于百分比价值吗?

解决方案

由于继承的原因，完全 ¹ 并不完全相同，这是一个简单的示例.

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

在第一种情况下，最后一个跨度的值line-height等于45px，即1.8 * (50% of 50px)，其中1.8是其父级继承的line-height值.在第二种情况下，最后一个跨度将具有等于90px的值，即180% of 50px，其中整个值均从其父级继承.

换句话说，第一个跨度获取1.8然后将考虑其font-size，而第二个跨度将从其父级获取计算值，而font-size将保持不变.

<number>

该属性的使用值是该数字乘以元素的字体大小.负值是非法的. 计算值与指定值相同.

<percentage>

属性的计算值是该百分比乘以元素的计算字体大小.负值是非法的. ^参考

请注意，在两种情况下，计算值都不相同，这两种情况下的继承都不同.

为更好地说明百分比情况:

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

如果您检查元素，则可以清楚地看到在所有情况下line-height的值等于90px

请参阅此问题以了解框高度为何变大的原因:为什么字体尺寸较小时，高度会增加? a>

如果我们考虑无单位价值，我们将得出不同的结果:

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

---

¹ 如果我们忽略继承事实，并且只考虑显式设置line-height的元素，那么我们可以说两者相同，因为它们为有关元素提供相同的结果.

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?

解决方案

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.

这篇关于line-height:1.4是否与line-height:140％相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！