CSS 行高与间距

Begindev 编辑部 March 25, 2026

行高 (line-height) 和字间距 (letter-spacing) 是两个基本的 CSS 属性，分别用于控制文本行之间的垂直间距和字符之间的水平间距。

1. 理解行高 (`line-height`)

行高，由 line-height 属性指定，决定了文本行之间的空间量。本质上，它是每个“行框 (line box)”的总高度。

适当的行高可以防止行与行之间显得过于拥挤或过于分散，从而提高可读性。

1.1 `line-height` 的值

line-height 属性接受几种类型的值：

Normal (默认)：通常是字体大小的 1 到 1.2 倍。具体数值取决于浏览器。
Number (数值)：一个无单位的数字，乘以元素的字体大小来确定行高。这是推荐的方法，因为它是相对于字体大小的，并且当字体大小发生变化时能避免意外结果。例如，line-height: 1.5 意味着行高是字体大小的 1.5 倍。
Length (长度)：以 px, em, rem, 或 pt 等单位指定的固定值。例如，line-height: 20px;。
Percentage (百分比)：相对于元素字体大小的百分比值。例如，line-height: 150%; 如果字体大小不变，它等同于 line-height: 1.5;。

示例

p {
  font-size: 16px;
  line-height: 1.5; /* 推荐：字体大小的 1.5 倍 (24px) */
}
h1 {
  font-size: 32px;
  line-height: 48px; /* 等同于 line-height: 1.5 */
}
.fixed-line-height {
  font-size: 16px;
  line-height: 20px; /* 固定行高 20 像素 */
}

在上面的例子中，段落 (p) 的行高设置为字体大小 (16px) 的 1.5 倍，结果是 24px。.fixed-line-height 类演示了使用固定像素值，这在特定情况下可能有用，但通常不如相对值灵活。

1.2 `line-height` 的继承性

line-height 属性是可以继承的。这意味着如果你在父元素上设置了 line-height，其子元素将继承该值。

关键区别：

当使用无单位数值（如 1.5）时，子元素继承的是这个比例系数。子元素会用自己的字体大小乘以这个系数来计算自己的行高。
当使用有单位的长度或百分比（如 24px 或 150%）时，父元素会先计算出具体的像素值，子元素继承的是这个计算后的像素值。

这就是为什么首选无单位数值的原因。

继承示例：

<div style="font-size: 20px; line-height: 1.6;">
  <h1>标题</h1>
  <p style="font-size: 14px;">这是一个段落。</p>
</div>

在这种情况下：

div 的 font-size 为 20px，line-height 为 1.6。
h1 继承 1.6 的系数。如果浏览器默认 h1 字体大小为 32px，则其行高为 32px * 1.6 = 51.2px。
段落 p 也继承 1.6 的系数。其行高为 14px * 1.6 = 22.4px。

如果 div 的 line-height 设置为固定值 32px，那么 h1 和 p 都会继承 32px 的行高。对于大字号的 h1 来说，32px 可能太拥挤（甚至重叠），而对于小字号的 p 来说可能太宽。

1.3 实际应用考量

可读性：正文文本的 line-height 在 1.4 到 1.7 之间通常被认为是最佳的。
标题：标题通常受益于稍小的 line-height（接近 1 到 1.2），使其看起来更紧凑。
长段落：较长的文本行可能需要更大的 line-height 来帮助眼睛在换行时找到下一行。

2. 理解字间距 (`letter-spacing`)

字间距，由 letter-spacing 属性控制，用于调整文本中字符之间的水平空间。它可以用来微妙地提高可读性或创建风格效果。

2.1 `letter-spacing` 的值

Normal (默认)：不添加额外空间。浏览器根据字体确定默认间距。
Length (长度)：以 px, em, rem 等单位指定的固定值。正值增加间距，负值减少间距（字符可能重叠）。

示例

p {
  letter-spacing: 1px; /* 每个字符间增加 1px 的空间 */
}
h1 {
  letter-spacing: 0.1em; /* 增加 0.1em 的空间 (相对于自身字体大小) */
}
.condensed {
  letter-spacing: -0.5px; /* 减少字符间距 0.5px */
}

2.2 `letter-spacing` 的继承性

letter-spacing 属性是可以继承的。这意味着如果你在父元素上设置了 letter-spacing，它的子元素将会继承该值。

示例：

<div style="letter-spacing: 2px;">
  <h1>Heading</h1>
  <p>This is a paragraph.</p>
</div>

在这种情况下，h1 和 p 元素都将从 div 继承 2px 的 letter-spacing。

2.3 实际应用考量

微妙调整：letter-spacing 最有效的使用方式是微调。过大的字间距会使单词分崩离析，难以阅读。
标题和展示文本：它可以用来为标题营造更优雅或现代的外观。
全大写文本 (All Caps)：全大写文本如果没有额外的间距会显得拥挤。增加 letter-spacing 可以显著提高全大写文本的可读性。

3. 结合使用行高和字间距

line-height 和 letter-spacing 协同工作，创造出视觉上吸引人且易读的文本。尝试这些属性的不同组合可以显著影响网页的整体美感。

示例：现代艺术画廊风格

body {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.6; /* 良好的正文阅读体验 */
}
h1, h2 {
  font-family: serif;
  font-weight: normal;
  letter-spacing: 0.1em; /* 增加标题的优雅感 */
  line-height: 1.2; /* 标题行距紧凑 */
}
p {
  letter-spacing: 0.05em; /* 正文微调 */
}
.artist-name {
  font-size: 24px;
  letter-spacing: 0.2em; /* 显著的宽间距 */
  text-transform: uppercase; /* 将在后续课程介绍 */
}

示例解析：

body 拥有标准的 line-height 以确保可读性。
标题 (Headings) 使用了衬线字体 (serif)，稍微增加了 letter-spacing 以显优雅，并使用了更紧凑的 line-height。
段落 (Paragraphs) 的 letter-spacing 略微增加。
.artist-name 类使用了更大的字号、更明显的 letter-spacing 以及 text-transform: uppercase（这将在后续课程中讲解），从而创造出一个视觉上独特的元素。

1. 理解行高 (line-height)

1.1 line-height 的值

1.2 line-height 的继承性