CSS 百分比不起作用的 line-height

在本文中，我们将介绍 CSS line-height 属性在使用百分比值时出现不起作用的情况，并找到解决方法。

阅读更多：CSS 教程

背景

CSS的line-height属性用于定义行框之间的间距。一般情况下，我们可以使用像素(px)、em或者单位less（无单位）的绝对值来设置line-height值，但也可以使用百分比作为相对值。

然而，很多人在使用CSS的百分比值时遇到了问题。看下面的例子：

<p class="example">Hello, CSS</p>

.example {
  font-size: 24px;
  line-height: 150%;
}

按照上述代码逻辑，行高应该为24px * 150% = 36px，但是实际上并没有生效。这是因为line-height的百分比值是相对于font-size值而言的，而不是相对于上一层元素的line-height值。

解决方法

要解决这个问题，我们可以使用以下两种方法之一。

方法一：使用单位less（无单位）的值

我们可以使用单位less（无单位）的值来设置line-height，它会根据元素自身的字体大小进行计算。修改上面的例子：

.example {
  font-size: 24px;
  line-height: 1.5;
}

这样，line-height的值就会根据自身的font-size进行计算，即24px * 1.5 = 36px。

方法二：使用绝对值

另一种方法是使用绝对值来设置line-height，而不是使用百分比。我们可以根据父元素的font-size来计算需要的行高。修改上面的例子：

body {
  font-size: 16px;
}

.example {
  font-size: 1.5em; /* 相当于24px */
  line-height: 24px;
}

这样，.example的font-size会被计算为24px，同时line-height设置为24px，达到了预期效果。需要注意的是，这种方法需要在父元素中设置font-size的值。

使用以上两种方法中的任意一种，我们都可以解决百分比line-height失效的问题。

总结

在本文中，我们通过针对CSS line-height属性百分比值不起作用的问题，给出了两种解决方法。一种是使用单位less（无单位）的值，另一种是使用绝对值并根据父元素的字体大小进行计算。通过正确理解和使用line-height属性，我们可以更好地控制文本的行高和间距，从而达到更好的排版效果。记住，line-height的百分比值是相对于元素自身的字体大小而言，不是相对于上一层元素的line-height值。