CSS 设置行间距

在本文中，我们将介绍如何使用CSS来设置行间距。行间距是指文本行之间的空白距离，它可以调整文本的可读性和美观性。

阅读更多：CSS 教程

什么是行间距？

行间距是文本行之间的垂直空间。它可以通过CSS属性line-height来设置。行间距的值可以是固定像素值、百分比、相对于父元素的高度等。

设置行间距的方法

1. 使用固定像素值

可以通过指定固定像素值来设置行间距，如下例所示：

p {
  line-height: 24px;
}

在上面的例子中，所有<p>元素的行间距都被设置为24像素。

2. 使用百分比

行间距还可以通过百分比来设置，如下例所示：

p {
  line-height: 150%;
}

在上面的例子中，所有<p>元素的行间距被设置为其字体大小的150%。

3. 使用相对于父元素的高度

行间距也可以相对于父元素的高度进行设置，如下例所示：

div.container {
  height: 400px;
}

p {
  line-height: 2;
}

在上面的例子中，<div class="container">元素的高度为400像素，而所有<p>元素的行间距被设置为其父元素高度的2倍（即800像素）。

4. 其他方式

除了上述介绍的方法外，还可以使用其他CSS属性来设置行间距。例如，可以使用margin和padding属性来创建额外的行间距。具体可以根据需要选择最合适的方式来设置行间距。

示例

p {
  font-size: 16px;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

/* 设置行间距为固定像素值 */
p.example1 {
  line-height: 24px;
}

/* 设置行间距为百分比 */
p.example2 {
  line-height: 150%;
}

/* 设置行间距为相对于父元素高度的值 */
div.container {
  height: 400px;
}

p.example3 {
  line-height: 2;
}

<h1>标题1</h1>
<p class="example1">这是一个例子，行间距设置为24像素。</p>

<h2>标题2</h2>
<p class="example2">这是一个例子，行间距设置为字体大小的150%。</p>

<div class="container">
  <h2>标题3</h2>
  <p class="example3">这是一个例子，行间距设置为父元素高度的2倍。</p>
</div>