中文段落首行缩进应设为text-indent: 2em,因1em≈当前字号下一个汉字宽度;避免用px、4em、padding-left或2ch,注意嵌套与富文本干扰,响应式下可用媒体查询微调。

直接改 text-indent 的值就行,但“两倍”得明确是相对于什么——不是随便乘 2。
text-indent 设成 2em 是最稳妥的“两字符缩进”
中文排版说的“首行空两格”,本质是让首行向右移动约两个汉字宽度。用 2em 正是为此设计:em 是相对于当前元素 font-size 的单位,1em ≈ 当前字号下 1 个汉字宽度(在多数中文字体中成立)。
常见错误是写成 text-indent: 4em 或 text-indent: 20px 后发现缩进过大或在手机上变细小——那不是“两倍”,是单位误用。
-
p { text-indent: 2em; }—— 推荐全局设置,适配字体缩放和响应式 - 如果段落内嵌了
<img alt="HTML怎么把段落缩进改成两倍" >或<strong></strong>等 inline-block 元素,且它们出现在首字符位置,text-indent会失效(只作用于纯文本开头);此时需把图文顺序调换,或改用padding-left+text-indent: -2em模拟(慎用,易裁切) - 不要用
2ch:虽语义更准,但 Safari 仍不支持,上线前查 caniuse 可知兼容性风险
别把 padding-left 当 text-indent 用
设 padding-left: 2em 看起来也“缩进”了,但它动的是整个 <p></p> 盒子的左内边距,第二行、背景色、边框都会跟着右移——这不符合中文段落规范(仅首行缩进,其余行左对齐)。
立即学习“前端免费学习笔记(深入)”;
更麻烦的是,如果同时写了 text-indent: 2em 和 padding-left: 2em,两者会叠加,缩进变成 4em,调试时很难一眼看出来源。
- 检查是否误加了
padding-left:打开浏览器开发者工具,看 computed styles 里text-indent是否被覆盖为0,或padding-left是否非零 - 富文本编辑器导出的 HTML 常混用内联
style="text-indent: 0",会强制清空你写的全局规则
移动端和用户缩放时缩进变大?那是 rem/em 的正常表现
在 iOS Safari 或开启系统字体放大的安卓设备上,2em 或 2rem 缩进可能突然变宽——这不是 bug,是浏览器为可访问性主动放大相对单位的结果。
如果你发现小屏下缩进太突兀(比如 2em 在 14px 字号下是 28px,占屏幕 1/5),可用媒体查询微调:
@media (max-width: 600px) {
p {
text-indent: 1.5em;
}
}
- 避免用
px单位硬编码“两倍”,比如text-indent: 40px:高 DPI 屏、用户缩放后会失真 - 若页面存在多级字号(如正文 16px、侧栏 14px),统一用
rem更可靠,前提是根字号html { font-size: 16px; }稳定
真正容易被忽略的点是嵌套块级元素和富文本污染——text-indent 看似简单,一旦混入 float、flex 父容器或编辑器内联样式,就不再是“改一个值”的事了。上线前务必在真机上用开发者工具逐层验证 computed styles。



















