CSS深入理解之line-height

line-height是CSS中用来控制行高的属性，它定义了一行文字的高度，包括文字的基线到下一行基线之间的距离。line-height既可以用于块级元素，也可以用于内联元素。

line-height的值可以使用以下几种单位：

- 数字值：表示文字相对于字体大小的倍数。例如，1.5表示文字高度是字体大小的1.5倍，2表示文字高度是字体大小的2倍。这种情况下，line-height会根据字体大小自动调整。

- 绝对单位：例如px、em等。这种情况下，line-height的值就是具体的像素或者em数值。

- 百分比：表示文字相对于父元素字体大小的百分比。例如，120%表示文字高度是父元素字体大小的120%。

line-height的值还可以具有以下几种特殊的关键字：

- normal：表示浏览器使用默认值。通常情况下，normal等价于1.2（如果没有其他样式的干扰）

- inherit：表示继承父元素的line-height值。

line-height的作用不仅仅是控制行高：

1. 行高的设置会影响文字的垂直对齐方式。文字默认是以基线对齐的，但是如果line-height的值大于字体的实际高度，那么文字就会垂直居中对齐。

2. 当文字换行时，line-height的值也会影响到行与行之间的间距。如果line-height的值大于字体的实际高度，那么每行之间的间距也会增大。

3. line-height的值还会影响到一些行内框模型的计算，例如按钮的高度、表单元素的高度等。

在实际应用中，可以通过line-height属性来控制文字在相对于其容器的垂直居中对齐，也可以通过设置不同的line-height值来调整文字的行间距，使页面更加美观。

下面是一个例子，演示了line-height的应用：

HTML代码：

```

这是一段文字。这是一段文字。这是一段文字。

```

CSS代码：

```

p {

font-size: 20px;

line-height: 1.5;

border: 1px solid black;

padding: 10px;

}

```

运行结果：

[](https://i.imgur.com/QcPIdku.png)

通过设置line-height为1.5，文字的行高增加了一倍，同时也影响了行内框模型的计算。因此，文字相对于其容器垂直居中对齐，每行之间的行间距也增大了。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/