CSS 行间距

CSS（层叠样式表）是一种用于描述网页上的元素样式的语言。它将样式应用于 HTML 元素，使网页更加美观和易于阅读。在设计网页时，行间距是一个重要的样式属性，它决定了文字行与行之间的距离。本文将详细介绍 CSS 中的行间距属性。

1. 什么是行间距？

行间距指的是文字行与行之间的垂直间距。在 CSS 中，通过 line-height 属性来控制行间距的大小。line-height 的值可以是具体的像素值、em、百分比，也可以是预定义的值。通常情况下，行间距的默认值是与字体大小相等的。

在编写 CSS 样式时，可以通过设置 line-height 的值来调整行间距，以优化页面的布局。调整行间距可以使文字更加整齐、易于阅读，也可以帮助我们实现某些特定的排版效果。

2. 如何设置行间距？

CSS 提供了多种设置行间距的方式，下面将分别介绍这些方式的使用方法。

2.1 使用具体像素值

可以使用具体的像素值来设置行间距，例如：

p {
  line-height: 24px;
}

上述代码将段落（p）的行间距设置为 24 像素。可以根据需要调整该值来满足不同的排版要求。

2.2 使用 em

em 是相对于当前元素的字体大小的单位。通过设置 line-height 的值为 em，可以根据当前元素的字体大小来计算行间距的大小。例如：

h1 {
  line-height: 1.5em;
}

上述代码将一级标题（h1）的行间距设置为其字体大小的 1.5 倍。

2.3 使用百分比

使用百分比也是一种常见的设置行间距的方式。通过设置 line-height 的值为百分比，可以根据当前元素的字体大小来计算行间距的大小。例如：

body {
  line-height: 150%;
}

上述代码将整个页面的行间距设置为其字体大小的 1.5 倍。

2.4 使用预定义值

CSS 还提供了几个预定义的值用于设置行间距，包括 normal、inherit 和 initial。

• normal：表示使用默认的行间距。
• inherit：表示继承父元素的行间距。
• initial：表示使用浏览器的默认行间距。

h2 {
  line-height: normal;
}

上述代码将二级标题（h2）的行间距设置为默认值。

3. 行间距的影响

调整行间距不仅可以改变文字行与行之间的距离，还会对页面的布局和排版产生一定的影响。下面将详细介绍行间距的几个影响。

3.1 垂直居中

行间距的大小影响文字垂直居中的效果。当行间距较大时，文字会相对于行框垂直居中；当行间距较小时，文字会相对于行框向上对齐。

h3 {
  line-height: 60px;
}

上述代码将三级标题（h3）的行间距设置为 60 像素，可以看到标题文字在行框中垂直居中显示。

3.2 行高更改

行间距的大小会对行高产生影响。通常情况下，行高默认与字体大小相等。当行间距大于字体大小时，行高会随之增加；当行间距小于字体大小时，行高会随之减小。

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

上述代码将段落（p）的字体大小设置为 16 像素，行间距设置为 24 像素。可以看到段落的行高会根据行间距的变化而调整。

3.3 排版效果

通过调整行间距的大小，还可以达到一些特定的排版效果。例如，增加行间距可以增加段落之间的空隙，使页面呈现出更加宽松的感觉。

p {
  line-height: 2em;
}

上述代码将段落（p）的行间距设置为两倍的字体大小，可以看到段落之间的空隙被放大。

4. 总结

行间距是调整文字行与行之间距离的重要样式属性，通过 CSS 的 line-height 属性可以设置行间距的大小。行间距的值可以是具体的像素值、em、百分比，也可以是预定义的值。调整行间距可以使文字更加整齐、易于阅读，还可以帮助实现某些特定的排版效果。同时，行间距的大小也会影响文字的垂直居中、行高以及整体的排版效果。在设计网页时，合理地设置行间距是优化页面布局的重要一环。