line-height: 1.4 是否与 line-height: 140% 相同？

Question

使用 1.4 的 line-height 值是否与使用 140% 的 line-height 值相同？换句话说，我们可以认为无单位值与百分比值相同吗？

Answer 1

由于继承关系，完全相同¹不完全相同，这里是一个简单的例子。

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

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

换句话说，第一个跨度获得1.8，然后将考虑其font-size，而第二个跨度将从其父级获得计算值，font-size 不会改变任何内容。

<number>

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

<percentage>

属性的计算值是这个百分比乘以元素的计算字体大小。负值是非法的。 ^ref

请注意，在这两种情况下，计算的值是不同的，这使得两种情况下的继承不同。

为了更好地说明百分比情况：

.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

参考这个问题来理解为什么盒子高度越来越大：Why would the height increase with a smaller font size?

如果我们考虑无单位值，我们会得到不同的结果：

.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的元素，那么我们可以说两者是相同的，因为它们将为 关注 元素给出相同的结果。

Answer 2

看例子..

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