编辑“︁CSS文本间距”︁

{{DISPLAYTITLE:CSS文本间距}}

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

== 核心属性 ==

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

<syntaxhighlight lang="css">
/* 示例：增加字母间距 */
.wide-letters {
  letter-spacing: 0.2em;
}

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

{| class="wikitable"
|-
! 输入HTML
! 输出效果
|-
|<pre><p class="wide-letters">Hello World</p></pre>
|style="letter-spacing: 0.2em"| Hello World
|-
|<pre><p class="tight-letters">Hello World</p></pre>
|style="letter-spacing: -0.05em"| Hello World
|}

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

<syntaxhighlight lang="css">
.spacious-words {
  word-spacing: 0.5em;
}
</syntaxhighlight>

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

<syntaxhighlight lang="css">
/* 推荐使用无单位值 */
.readable-text {
  line-height: 1.6;
}

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

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

<syntaxhighlight lang="css">
.indented-paragraph {
  text-indent: 2em;
}
</syntaxhighlight>

== 高级特性 ==

=== 使用CSS变量动态控制 ===
通过CSS变量实现响应式文本间距：

<syntaxhighlight lang="css">
:root {
  --spacing-factor: 1.2;
}

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

=== 全局间距策略 ===
通过<code>rem</code>单位实现基于根字体大小的比例间距系统：

<syntaxhighlight lang="css">
html {
  font-size: 16px;
  /* 基准行高 */
  line-height: 1.5;
}

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

== 视觉关系图 ==
<mermaid>
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
</mermaid>

== 数学关系 ==
行高的计算遵循以下公式：
<math>
\text{实际行高} = \text{font-size} \times \text{line-height}
</math>

例如当<code>font-size: 16px</code>且<code>line-height: 1.5</code>时：
<math>
16\text{px} \times 1.5 = 24\text{px}
</math>

== 实际应用案例 ==

=== 新闻网站排版 ===
<syntaxhighlight lang="css">
.news-article {
  line-height: 1.6;
  word-spacing: 0.1em;
  text-indent: 0; /* 网络阅读通常不需要首行缩进 */
}
</syntaxhighlight>

=== 艺术标题设计 ===
<syntaxhighlight lang="css">
.artistic-heading {
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 0.5em; /* 段落间距控制 */
}
</syntaxhighlight>

== 最佳实践 ==

* '''可读性优先'''：正文行高建议1.5-1.6，长文本可增至1.8
* '''上下文适应'''：标题可使用较小的行高（如1.2-1.3）
* '''单位选择'''：
  ** 相对单位（em/rem）更适合响应式设计
  ** 像素单位适合需要精确控制的场景
* '''浏览器默认值'''：
  {| class="wikitable"
  |-
  ! 属性
  ! 默认值
  |-
  | letter-spacing
  | normal (≈0)
  |-
  | word-spacing
  | normal (≈0)
  |-
  | line-height
  | normal (≈1.2)
  |-
  | text-indent
  | 0
  |}

== 常见问题 ==

=== 为什么设置的line-height不生效？===
可能原因：
1. 被更具体的选择器覆盖
2. 元素具有<code>display: inline</code>特性（行内元素的行高表现不同）
3. 父元素设置了<code>overflow: hidden</code>

=== 如何实现中文段落的首行缩进两字符？===
推荐方案：
<syntaxhighlight lang="css">
p {
  text-indent: 2em; /* 精确匹配中文字符宽度 */
}
</syntaxhighlight>

== 浏览器支持 ==
所有现代浏览器完全支持文本间距属性，包括：
* Chrome 1+
* Firefox 1+
* Safari 1+
* Edge 12+
* Opera 3.5+

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

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]