最稳妥的中文段落首行缩进写法是text-indent: 2em，它适配中文字体、响应式友好；避免用px或ch单位；需确保display为block且无高权重覆盖等干扰。
text-indent: 2em 是最稳妥的写法
中文长篇段落首行缩进，直接用 text-indent: 2em 即可，别绕路。这个值在绝大多数中文字体（如 Microsoft YaHei、PingFang SC、Noto Sans CJK）下视觉上接近两个汉字宽度，且随 font-size 缩放，响应式友好。
常见错误是写成 text-indent: 32px 或 text-indent: 20px：系统字体放大、高 DPI 屏幕或用户开启“更大文本”辅助功能时，固定像素缩进会显得过小或突兀。
也不建议用 2ch——虽然语义更贴近“字符宽度”，但 IE 完全不支持，部分国产浏览器对中文字体的 ch 计算也不稳定，实测容易偏窄。
为什么加了 text-indent 却没缩进？先查这五点
不是代码写错了，而是渲染前提没满足：
-
display不是block：比如<p style="display: inline"></p>或富文本编辑器输出的inline-block段落，text-indent直接失效 - 父容器是
display: flex或display: grid：此时<p></p>的块级盒行为被覆盖，需显式加display: block并设width: 100%（仅 flex item 下 width:auto 可能退化） - 段落开头有
<img>、<svg></svg>等内联替换元素：缩进仍发生，但视觉上被图片“吃掉”，看起来像没动 - 被高权重样式覆盖：比如某处写了
p { text-indent: 0 !important }，常见于 CMS 或编辑器 CSS 注入 -
white-space: pre或pre-wrap：首行若含空格或制表符，会优先渲染这些空白，造成“双缩进”错觉
最快验证方式：打开开发者工具 → 找到目标 <p></p> → 切到 Computed 标签页 → 看 display 是否为 block，且 text-indent 最终值不是 0。
首段不缩进怎么安全跳过
导语、引言、标题后第一段通常不该缩进。全局设 text-indent: 0 容易误伤，推荐主动排除：
p:first-of-type { text-indent: 0; } —— 适合结构清晰、首段总在正文最前的页面（如博客文章）
.no-indent { text-indent: 0 !important; } —— 更灵活，配合 HTML 加 class 控制，比如 <p class="no-indent">本文导语…</p>
注意：别用 :first-child，如果首段前面有 <h2></h2> 或注释节点，它就匹配不上。
flex/grid 容器里 text-indent 失效怎么办
这不是 bug，是格式化上下文限制。强行塞 display: block 有时能救急，但更稳的做法是换思路：
首选 padding-left: 2em：它不依赖“首行”语义，对 flex item / grid item 同样生效，视觉效果几乎一致，且兼容性无死角。
若必须保留 text-indent 语义（比如要适配打印样式表），则给 <p></p> 显式加：
display: block;<br>width: 100%;<br>text-indent: 2em;
别在导航栏、卡片标题这类本就不该有“段落缩进”语义的地方硬套 text-indent——那是间距问题，该用 margin-left 或 padding-left。
真正容易被忽略的是 white-space 和 direction 的隐式干扰：段落里混用 direction: rtl 或设置了 white-space: pre-wrap，text-indent 可能缩进到右边，或只对换行后的“第一行”起作用。这种时候，先清掉干扰属性再调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
