怎么在css中设置行高

CSS中的行高（line-height）用于控制文本在行内的垂直间距。在通常情况下，文本的行高由字体和字号决定。然而，可以通过设置行高属性来调整相关间距。本文介绍如何在CSS中设置行高。

1.行高的单位

在CSS中设置行高时，需要指定单位。常用的单位包括：

- em: 行高为当前字体大小的倍数。

- px: 行高为像素。

- %: 行高为父元素字体大小的百分比。

- rem: 行高为根元素字体大小的倍数。

例如，设置行高为1.5倍字体大小可以使用以下代码：

p {
  line-height: 1.5em;
}

2.设置行高

在CSS中设置行高的方法包括：

- 使用单位设置行高

可以使用上面列举的单位来设置行高，例如像素单位的代码：

p {
  line-height: 30px;
}

其中，30px是文本行高。

- 使用百分比设置行高

可以使用百分比来设置行高，例如父元素（容器）字体大小的50％：

p {
  line-height: 50%;
}

- 使用字体大小设置行高

在CSS中，可以使用字体大小来设置行高。通常情况下，行高为当前字体大小的1.4倍：

p {
  font-size: 16px;
  line-height: 1.4;
}

- 设置多个文本行的行高

在CSS中，可以设置不同文本行的不同行高。例如，这个代码可以在 行设置较小的行高，第二行设置较大的行高：

p {
  line-height: 1.2;
}

p.first-line {
  line-height: 1;
}

p.second-line {
  line-height: 1.5;
}

- 根据字体设置行高

在CSS中，可以使用font属性设置行高。这个代码将根据给定字体设置文本的行高：

p {
  font: 16px/1.4 Helvetica, Arial, sans-serif;
}

其中，16px为字体大小，1.4为行高，Helvetica，Arial和sans-serif为字体。

- 使用calc()函数设置行高

在CSS中，可以使用calc()函数设置行高。这个函数可以根据浏览器窗口大小自动计算出行高。例如，下面的代码可以设置文本行高永远等于浏览器窗口宽度的50％：

p {
  line-height: calc(50% - 10px);
}

- 设置行高的差异

在CSS中，可以设置不同文本行的行高差异。例如，下面的代码可以在 行的行高上减去5个像素：

p {
  line-height: 1.5;
}

p.first-line {
  line-height: calc(1.5 - 5px);
}

这些都是设置CSS中文本行高的一些方式。根据自己的需求选择合适的方式可以更好地控制文本的外观。