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

Question

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

Answer 1

由于继承，没有完全相同的^{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其父级继承的 line-height 值。在第二种情况下，最后一个 span 的值等于从其父级继承的整个值的值。45px1.8 * (50% of 50px)1.890px180% of 50px

换句话说，第一个 span 获取1.8then 将考虑它font-size，而第二个 span 将从其父 span 获取计算值并且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

参考这个问题来理解为什么盒子高度越来越大：为什么高度会随着较小的字体大小而增加？

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

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