text-indent是唯一语义正确且浏览器原生支持的首行缩进方式,适用于块级元素如,推荐用2em单位实现响应式缩进;禁用空格或 等非语义方式,避免失效与兼容问题。

用 text-indent 是最直接的方式
HTML 本身不提供“首行缩进”语义标签,必须靠 CSS 控制。几乎所有现代浏览器都支持 text-indent,它只作用于段落(<p></p>)的第一行,不影响后续行。
常见写法是:
p {
text-indent: 2em;
}
注意:2em 表示缩进两个当前字体大小的宽度,比用 px 更适配响应式场景;如果设为负值(如 -1em),文字会向左溢出,慎用。
为什么 或空格字符不推荐
有人习惯在段首手动加 或多个空格,这会导致几个实际问题:
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
- 内容与样式耦合,后期改缩进量得逐段替换
- 复制文本时会多出不可见空格,影响数据清洗或 SEO
- 在
white-space: pre-wrap或代码块里可能意外保留,破坏排版逻辑 - 无障碍阅读器可能把连串
读作“空格空格空格”,干扰体验
遇到中文段落缩进失效?检查这些点
中文网站常出现“写了 text-indent 却没效果”,多数是以下原因:
-
p元素设置了display: inline或inline-block——text-indent只对块级元素生效 - 父容器有
text-align: justify且子元素含换行符或内联元素,可能干扰首行判定 - 段落内第一项是
<img>、<span></span>等内联元素且带float或vertical-align,导致首行基线偏移 - 用了 CSS Reset(如 normalize.css)重置了
p的margin,但忘了确认是否也清除了text-indent
需要兼容 IE8?别用 rem 做单位
IE8 及更早版本不支持 rem,若项目仍需兼容,缩进值优先选 em 或固定像素(如 24px)。另外,IE8 不支持 text-indent 在 flex 容器子项上生效,如果段落被包在 display: flex 的父容器里,要确保 p 自身仍是块级流布局。
真正麻烦的不是加缩进,而是缩进后和行高、上下外边距之间的视觉节奏——比如 line-height: 1.6 配 text-indent: 2em 很顺,但换成 line-height: 1 就容易显得局促。这点常被忽略,调样式时得一起看。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










