在中文网页排版里,段落首行空两格是比较基础的排版要求。实现首行缩进效果通常依赖CSS样式控制,也可以借助HTML字符直接处理。下面介绍几种常见且稳定的做法。

使用CSS的text-indent属性
最常见的方式是给段落元素设置text-indent,它用来指定文本块首行的缩进距离。一般中文排版空两格对应两个字符宽度,可用2em表示。
/* 对所有段落设置首行缩进两个字符 */
p {
text-indent: 2em;
}
如果只想让某一部分段落缩进,可以加一个类:
.indent-first {
text-indent: 2em;
}
<p class="indent-first">这是一段需要首行缩进的文字内容。</p>
使用HTML特殊字符缩进
在不方便写CSS的场景,可直接在段落开头放两个全角空格。全角空格在HTML里可用 表示。
<p> 这段文字开头使用了两个全角空格来实现缩进。</p>
这种方法简单但不利于统一维护,不建议在大项目中大量使用。
对比与建议
| 方式 | 优点 | 缺点 |
|---|---|---|
| CSS text-indent | 统一控制、易维护 | 需要样式支持 |
| HTML全角空格 | 直观、无需CSS | 难统一、冗余代码多 |
注意事项
- 使用
text-indent时,若段落内有块级子元素,缩进可能表现异常,需要测试。 - 不要对已有padding或margin的容器重复设置缩进,避免布局错乱。
- 在移动端页面中,
2em会随字体大小变化,通常仍符合阅读习惯。
完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>首行缩进示例</title>
<style>
p {
text-indent: 2em;
line-height: 1.8;
}
</style>
</head>
<body>
<p>这是第一段落,首行会自动缩进两个字符宽度,符合中文排版习惯。</p>
<p>这是第二段落,同样拥有首行缩进效果,整体页面更整齐。</p>
</body>
</html>
通过上述方法,你可以根据项目需要选择合适的首行缩进实现方案。优先推荐使用CSS的text-indent,既清晰又方便后期调整。
首行缩进CSS_text_indentHTML修改时间:2026-07-29 20:33:20