引导者

CSS line-height 属性定义了一个元素中文本行之间的间距。它可以通过指定一个具体的数值、一个百分比值，或者是一个称为“倍数”的值来设置。

# 1. line-height属性的语法

line-height 属性具有以下语法：

```css

line-height: normal|number|length|%

```

- normal: 默认行高

- number: 行高为该数值的倍数。例如，设置行高为1.5，则实际行高会根据字体大小来计算。

- length: 设置行高为具体的长度值。例如，设置行高为20px，则每行的高度为20像素。

- %: 行高为父元素字体大小的百分比值。例如，设置行高为150%，则实际行高会根据父元素字体大小来计算。

# 2. line-height属性的应用场景

line-height 属性常用于控制文本行与行之间的间距，从而改变文本块的外观。它可以用于以下场景：

- 设置按钮、链接等内联元素的行高，使其在垂直方向上居中对齐。

- 控制多行文本的行高，使其易于阅读并提高可读性。

- 改变段落中行与行之间的间距，以适应不同的排版需求。

# 3. line-height属性的使用示例

下面是一些使用 line-height 属性的示例：

```css

/* 将文本行的行高设置为字体大小的1.5倍 */

p {

line-height: 1.5;

/* 将按钮的行高设置为与按钮高度相等，使其在垂直方向上居中显示 */

button {

line-height: 100%;

height: 30px;

/* 将链接的行高设置为50%，使其在垂直方向上紧凑显示 */

a {

line-height: 50%;

/* 将段落中的文本行间距设置为20像素 */

p {

line-height: 20px;

```

在上述示例中，我们通过改变 line-height 属性的值来控制元素中文本行之间的间距，从而达到不同的视觉效果。

# 4. 总结

CSS line-height 属性可以用于控制元素中文本行之间的间距。通过设置不同的取值，可以改变段落、按钮、链接等元素的外观。具体的取值包括 normal、number、length 和百分比值。熟练运用 line-height 属性可以提高文本的可读性和排版的灵活性。