编辑“︁CSS文本缩进”︁

{{DISPLAYTITLE:CSS文本缩进}}

'''CSS文本缩进'''（Text Indentation）是CSS中用于控制段落首行缩进距离的属性，主要应用于块级元素（如`<p>`、`<div>`等）。该属性允许开发者精确控制文本的排版样式，常用于文章、文档或需要段落分明的场景。

== 基本语法 ==
`text-indent`属性的基本语法如下：
<syntaxhighlight lang="css">
selector {
    text-indent: length | percentage | inherit;
}
</syntaxhighlight>

其中：
* '''length'''：指定固定缩进值（如`2em`、`20px`）。
* '''percentage'''：基于父元素宽度的百分比缩进（如`5%`）。
* '''inherit'''：继承父元素的`text-indent`值。

== 属性值详解 ==
=== 固定长度缩进 ===
使用绝对单位（如`px`）或相对单位（如`em`）定义缩进：
<syntaxhighlight lang="css">
p {
    text-indent: 2em; /* 首行缩进2个字符宽度 */
}
</syntaxhighlight>

=== 百分比缩进 ===
缩进距离根据父元素宽度动态计算：
<syntaxhighlight lang="css">
div {
    width: 500px;
}
p {
    text-indent: 10%; /* 缩进50px（500px的10%） */
}
</syntaxhighlight>

=== 负值缩进 ===
负值可实现“悬挂缩进”效果（首行突出）：
<syntaxhighlight lang="css">
blockquote {
    text-indent: -1em; /* 首行向左突出1em */
    padding-left: 1em; /* 避免文本超出容器 */
}
</syntaxhighlight>

== 代码示例 ==
以下是一个完整的HTML与CSS示例：
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <style>
        .normal-indent {
            text-indent: 30px;
        }
        .percentage-indent {
            text-indent: 15%;
        }
        .hanging-indent {
            text-indent: -20px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <p class="normal-indent">此段落首行缩进30像素。这是CSS文本缩进的常见用法。</p>
    <div style="width: 200px;">
        <p class="percentage-indent">此段落缩进父元素宽度的15%（30px）。</p>
    </div>
    <p class="hanging-indent">此段落使用悬挂缩进，首行向左突出20像素。</p>
</body>
</html>
</syntaxhighlight>

'''输出效果：'''
<div style="border: 1px solid #ccc; padding: 10px; background: #f9f9f9;">
    <p style="text-indent: 30px; margin: 0;">此段落首行缩进30像素。这是CSS文本缩进的常见用法。</p>
    <div style="width: 200px; margin: 10px 0;">
        <p style="text-indent: 15%; margin: 0;">此段落缩进父元素宽度的15%（30px）。</p>
    </div>
    <p style="text-indent: -20px; padding-left: 20px; margin: 0;">此段落使用悬挂缩进，首行向左突出20像素。</p>
</div>

== 实际应用场景 ==
=== 印刷风格排版 ===
报纸或杂志文章通常使用`2em`缩进以区分段落：
<syntaxhighlight lang="css">
article p {
    text-indent: 2em;
    margin-bottom: 0; /* 避免与缩进产生双重间距 */
}
</syntaxhighlight>

=== 悬挂标注 ===
在参考文献列表中，可使用负缩进突出编号：
<mermaid>
graph LR
    A[1. 文献标题] --> B[作者, 年份]
    style A text-indent:-1em,padding-left:1em
</mermaid>

=== 响应式设计 ===
结合百分比单位实现自适应缩进：
<syntaxhighlight lang="css">
@media (max-width: 600px) {
    p {
        text-indent: 5%; /* 小屏幕缩进减少 */
    }
}
</syntaxhighlight>

== 注意事项 ==
* '''继承性'''：`text-indent`会被子元素继承，除非显式覆盖。
* '''表格单元格'''：部分浏览器可能忽略对`<td>`的缩进设置。
* '''行内元素'''：需将元素设为`display: block`或`display: inline-block`后生效。

== 数学关系 ==
缩进距离计算公式：
<math>
\text{实际缩进} = 
\begin{cases} 
\text{length} & \text{固定单位} \\
\text{parentWidth} \times \text{percentage} & \text{百分比单位}
\end{cases}
</math>

== 浏览器兼容性 ==
所有现代浏览器均支持`text-indent`，包括：
* Chrome 1+
* Firefox 1+
* Safari 1+
* Edge 12+
* Opera 7+

== 进阶技巧 ==
=== 结合伪元素 ===
使用`::first-line`伪元素实现首行特殊样式：
<syntaxhighlight lang="css">
p::first-line {
    text-indent: 0; /* 重置首行缩进 */
    font-weight: bold;
}
</syntaxhighlight>

=== 多列布局 ===
在多列文本中统一缩进：
<syntaxhighlight lang="css">
.multicol {
    column-count: 3;
    column-gap: 20px;
}
.multicol p {
    text-indent: 1em;
}
</syntaxhighlight>

== 总结 ==
`text-indent`是控制段落排版的核心属性，通过灵活运用长度单位、百分比或负值，可满足从传统印刷到现代网页设计的多样化需求。初学者应注意其继承性和块级元素限制，而高级用户可结合媒体查询或伪元素实现动态效果。

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