text-indent是唯一语义正确且浏览器原生支持的首行缩进方式,推荐使用2em单位以适配字号变化;失效主因是元素非块级、被flex/grid干扰、开头为内联替换元素或white-space破坏换行。

用 text-indent 控制段落首行缩进
HTML 本身没有“段落整体缩进”这个概念,真正起作用的是 CSS 的 text-indent 属性——它只缩进**首行**,不是整段文字向右平移。这是最常用、也最符合排版规范的做法。
常见错误是以为给 <p> 加 margin-left 就算“整体缩进”,但那样会破坏段落对齐(比如遇到换行或内联元素时缩进不一致),也不符合中文出版物对“首行缩进两字符”的惯例。
-
text-indent: 2em是最稳妥的选择,em相对于当前字体大小,能随字号自适应 - 避免用
px(如text-indent: 32px),否则缩进在不同字号下失真 - 如果段落含
<span>或图标等内联内容,text-indent仍只作用于第一行开头,不影响内部布局
想让整段文字(含所有行)一起右移?用 padding-left 或 margin-left
这属于视觉位移,不是语义上的“缩进”,但有时 UI 需求确实要整块文字向右挪。此时不能依赖 text-indent,而应操作容器的外边距或内边距。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
-
padding-left:文字离左边界距离变大,背景色/边框也会跟着右移 -
margin-left:整个<p>块向外推,不影响内部行高或背景填充 - 注意:若父容器有
text-align: justify,加margin-left可能导致末行对齐异常 - 响应式场景下,建议配合
max-width使用,避免小屏时缩进过大挤出内容
中文文档里“两个汉字宽度”怎么精确写?
中文排版常说“首行缩进两个字”,但字体、字号、字体族都会影响单字宽度。直接写 2em 是最接近的通用解法——因为 1em 在多数中文字体中≈一个汉字宽。
立即学习“前端免费学习笔记(深入)”;
- 不用
2ch:虽然ch单位理论上代表“0”字符宽,但中文字体下支持差,Chrome/Firefox 表现不一致 - 避免
2ex:这个单位基于小写字母 x 高度,在中文字体中无意义 - 如需严格对齐(例如 PDF 导出或印刷级要求),得用 CSS @supports + font metrics 检测,但日常网页开发没必要
为什么 <p style="text-indent: 2em"> 有时没效果?
最常见的原因是段落里第一个子节点不是文本节点,而是空格、换行符或内联标签(比如 <span></span>),导致浏览器把首行识别为空白行,text-indent 不触发。
- 检查开发者工具中该
<p>的实际渲染文本节点是否被包裹在其他标签里 - 确保 HTML 源码中段落开头没有多余空白或注释(如
<p>


















