CSS line-height:1 是什么

在本文中，我们将介绍CSS中的 line-height:1 属性，并详细解释它的作用和用法。

line-height 属性定义了行框的高度，即行高。行高可以影响文本在块级元素中的显示方式。在默认情况下，line-height 的值是 normal，这意味着行高是根据文本内容自动计算的。

但是，当我们将 line-height 设置为 1 时，实际上是将行高设置为文本字体大小的 1 倍。这将导致文本的每行紧密排列，并且行与行之间没有额外的间距。

阅读更多：CSS 教程

line-height:1 的使用示例

下面是一个示例，展示了如何使用 line-height:1 属性：

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    font-size: 16px;
    line-height: 1;
  }
</style>
</head>
<body>

<p>This is some text with line-height set to 1.</p>
<p>This is another line of text.</p>

</body>
</html>

在上面的示例中，我们将 line-height 设置为 1，并应用到 <p> 元素。这意味着每行文本的高度将与字体大小相等。因此，行与行之间没有额外的间距，使得文本紧密排列。

我们还可以通过将 line-height 设置为其他值来自定义行高。例如，如果我们将 line-height 设置为 2，表示行高将是字体大小的 2 倍，文本行之间将有更大的间距。

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    font-size: 16px;
    line-height: 2;
  }
</style>
</head>
<body>

<p>This is some text with line-height set to 2.</p>
<p>This is another line of text.</p>

</body>
</html>