如何使用 CSS 以百分比为单位设置行高？

在 CSS 中，我们可以使用百分比来设置一个元素的行高。这个操作非常简单，只需要使用 line-height 属性来设置。

代码实现

p {
  line-height: 150%;
}

上面的代码中，我们设置了一个段落元素的行高为 150%。这意味着该元素中的每一行的高度都是其字体大小的 1.5 倍。

注意事项

当我们设置一个元素的行高时，我们需要注意以下几点：

• 行高的值可以是任意数字或单位，包括百分比、像素、ems 等。
• 如果我们使用的是百分比，该值是相对于该元素所在的容器的高度来计算的。
• 行高不同于行间距。行高指的是当文字和其他元素在同一行时，文字所占据的高度。行间距指的是两行文本之间的距离。
• 如果我们不设置行高，文本的行高将默认为其字体大小的 1.2 倍。

结论

在 CSS 中，我们可以使用百分比来设置元素的行高。只需要使用 line-height 属性并将值设置为所需百分比即可。但是需要注意，行高不同于行间距，要确保设置行高的同时也设置了合适的行间距，以便呈现更好的文本效果。