CSS文本间距

CSS文本间距是控制网页中文字之间、字母之间、行与行之间以及段落之间距离的一组CSS属性。这些属性对于提升文本可读性、视觉层次感和整体设计美感至关重要。本文将详细介绍CSS中与文本间距相关的核心属性及其应用。

核心属性

letter-spacing

控制字符（字母）之间的间距，可为正值（增加间距）或负值（减少间距）。

/* 示例：增加字母间距 */
.wide-letters {
  letter-spacing: 0.2em;
}

/* 示例：紧缩字母间距 */
.tight-letters {
  letter-spacing: -0.05em;
}

输入HTML	输出效果
<p class="wide-letters">Hello World</p>	Hello World
<p class="tight-letters">Hello World</p>	Hello World

word-spacing

控制单词之间的间距，同样支持正负值。

.spacious-words {
  word-spacing: 0.5em;
}

line-height

定义行与行之间的垂直间距（行高），可用无单位数值（相对于字体大小）、固定值或百分比。

/* 推荐使用无单位值 */
.readable-text {
  line-height: 1.6;
}

/* 固定值示例 */
.compact-text {
  line-height: 18px;
}

text-indent

设置段落首行缩进，常用于印刷式排版。

.indented-paragraph {
  text-indent: 2em;
}

高级特性

使用CSS变量动态控制

通过CSS变量实现响应式文本间距：

:root {
  --spacing-factor: 1.2;
}

.adaptive-spacing {
  letter-spacing: calc(0.1em * var(--spacing-factor));
  line-height: calc(1.5 * var(--spacing-factor));
}

全局间距策略

通过rem单位实现基于根字体大小的比例间距系统：

html {
  font-size: 16px;
  /* 基准行高 */
  line-height: 1.5;
}

h1 {
  /* 24px字体的1.25倍行高 */
  font-size: 1.5rem;
  line-height: 1.25;
}

视觉关系图

graph TD A[文本间距] --> B[字符级] A --> C[单词级] A --> D[行级] A --> E[段落级] B --> letter-spacing C --> word-spacing D --> line-height E --> text-indent E --> margin/padding

数学关系

行高的计算遵循以下公式： $\text{实际行高}=\text{font-size}\times \text{line-height}$

例如当font-size: 16px且line-height: 1.5时： $16\text{px}\times 1.5=24\text{px}$

实际应用案例

新闻网站排版

.news-article {
  line-height: 1.6;
  word-spacing: 0.1em;
  text-indent: 0; /* 网络阅读通常不需要首行缩进 */
}

艺术标题设计

.artistic-heading {
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 0.5em; /* 段落间距控制 */
}

最佳实践

• 可读性优先：正文行高建议1.5-1.6，长文本可增至1.8
• 上下文适应：标题可使用较小的行高（如1.2-1.3）
• 单位选择：

 ** 相对单位（em/rem）更适合响应式设计
 ** 像素单位适合需要精确控制的场景

• 浏览器默认值：

属性	默认值
letter-spacing	normal (≈0)
word-spacing	normal (≈0)
line-height	normal (≈1.2)
text-indent	0

常见问题

为什么设置的line-height不生效？

可能原因： 1. 被更具体的选择器覆盖 2. 元素具有display: inline特性（行内元素的行高表现不同） 3. 父元素设置了overflow: hidden

如何实现中文段落的首行缩进两字符？

推荐方案：

p {
  text-indent: 2em; /* 精确匹配中文字符宽度 */
}

浏览器支持

所有现代浏览器完全支持文本间距属性，包括：

• Chrome 1+
• Firefox 1+
• Safari 1+
• Edge 12+
• Opera 3.5+

IE6+也支持这些属性，但在某些版本中存在部分渲染差异。