CSS文本缩进

CSS文本缩进（Text Indentation）是CSS中用于控制段落首行缩进距离的属性，主要应用于块级元素（如`

`、`

`等）。该属性允许开发者精确控制文本的排版样式，常用于文章、文档或需要段落分明的场景。

基本语法[编辑 | 编辑源代码]

`text-indent`属性的基本语法如下：

selector {
    text-indent: length | percentage | inherit;
}

其中：

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

属性值详解[编辑 | 编辑源代码]

固定长度缩进[编辑 | 编辑源代码]

使用绝对单位（如`px`）或相对单位（如`em`）定义缩进：

p {
    text-indent: 2em; /* 首行缩进2个字符宽度 */
}

百分比缩进[编辑 | 编辑源代码]

缩进距离根据父元素宽度动态计算：

div {
    width: 500px;
}
p {
    text-indent: 10%; /* 缩进50px（500px的10%） */
}

负值缩进[编辑 | 编辑源代码]

负值可实现“悬挂缩进”效果（首行突出）：

blockquote {
    text-indent: -1em; /* 首行向左突出1em */
    padding-left: 1em; /* 避免文本超出容器 */
}

代码示例[编辑 | 编辑源代码]

以下是一个完整的HTML与CSS示例：

<!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>

输出效果：

此段落首行缩进30像素。这是CSS文本缩进的常见用法。

此段落缩进父元素宽度的15%（30px）。

此段落使用悬挂缩进，首行向左突出20像素。

实际应用场景[编辑 | 编辑源代码]

印刷风格排版[编辑 | 编辑源代码]

报纸或杂志文章通常使用`2em`缩进以区分段落：

article p {
    text-indent: 2em;
    margin-bottom: 0; /* 避免与缩进产生双重间距 */
}

悬挂标注[编辑 | 编辑源代码]

在参考文献列表中，可使用负缩进突出编号：

响应式设计[编辑 | 编辑源代码]

结合百分比单位实现自适应缩进：

@media (max-width: 600px) {
    p {
        text-indent: 5%; /* 小屏幕缩进减少 */
    }
}

注意事项[编辑 | 编辑源代码]

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

数学关系[编辑 | 编辑源代码]

缩进距离计算公式： $实际缩进 = {\begin{cases} length & 固定单位 \\ parentWidth \times percentage & 百分比单位 \end{cases}$

浏览器兼容性[编辑 | 编辑源代码]

所有现代浏览器均支持`text-indent`，包括：

Chrome 1+
Firefox 1+
Safari 1+
Edge 12+
Opera 7+

进阶技巧[编辑 | 编辑源代码]

结合伪元素[编辑 | 编辑源代码]

使用`::first-line`伪元素实现首行特殊样式：

p::first-line {
    text-indent: 0; /* 重置首行缩进 */
    font-weight: bold;
}

多列布局[编辑 | 编辑源代码]

在多列文本中统一缩进：

.multicol {
    column-count: 3;
    column-gap: 20px;
}
.multicol p {
    text-indent: 1em;
}

总结[编辑 | 编辑源代码]

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