text-indent 失效主因是首行含内联替换元素、flex/grid 布局干扰或样式覆盖；应优先用 2em 缩进，避免 px/rem/%，首段需重置，段间距用 margin 控制。
text-indent 值设对了但缩进位置偏移
不是代码写错了，而是 text-indent 的生效位置被干扰了。最常见的是段落开头有 <img>、<svg></svg> 或 emoji 这类内联替换元素（replaced inline elements），浏览器会把缩进应用在该元素左侧，文字本身没动，视觉上就是“缩了等于没缩”。验证方法：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值非 0。
- 若首行是图标或图片，改用
padding-left: 2em+text-align: justify组合，虽语义弱一点，但视觉对齐可控 - 避免在
<p></p>内部混用direction: rtl或含双向文本的片段，否则text-indent可能向右偏移 - 富文本编辑器导出的 HTML 常带内联样式，比如
style="text-indent: 0px"，需用p[style] { text-indent: 2em !important; }覆盖
中文两字符缩进该用 2em 还是 2ch
2em 是更稳妥的选择。1em ≈ 当前 font-size，缩进随字号放大/缩小，中文下视觉接近两个汉字宽度；而 2ch 虽语义更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，且多数中文字体里 1ch 远小于一个汉字，实际缩进不足。
- 别用
32px或20px：系统缩放、DPI 变化时会失准 - 慎用
2rem：若项目用 JS 动态改html { font-size }（如夜间模式），缩进会意外跳变 - 绝对不用百分比（如
2%）：窄屏下缩进可能只剩几像素，完全不够两字符
Flex/Grid 容器里 <p></p> 缩进失效
这不是 bug，是格式化上下文变更的自然结果。text-indent 仅对块级盒（block formatting context）内的首行生效，而 display: flex 或 display: grid 父容器会让子 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 失去传统块级盒行为——它的 text-indent 计算被忽略。
- 临时方案：给
<p></p>加display: block并确保父容器未强制覆盖其盒模型 - 更可靠做法：换思路，用
padding-left: 2em模拟缩进，它对任何display类型都有效 - 若必须保留语义和 flex 布局，可把
<p></p>包一层<div>，让外层负责布局，内层负责排版 <h3>首段不该缩进却缩了，或段间距错乱</h3> <p>中文排版惯例是首段不缩进，但所有段落都套用统一 <code>text-indent: 2em就会破例。同时，段间距该由margin控制，不是padding—— 后者会撑大容器高度，还可能和 border 或 flex 对齐冲突。- 首段重置：
p:first-of-type { margin-top: 0; text-indent: 0; } - 段间距统一用
margin：p { margin: 1.2em 0; }，避免用padding模拟 - 若段落内含
vertical-align: middle的内联元素（如图标），line-height会影响其垂直基准线，需额外测试
真正麻烦的不是写一行
text-indent，而是缩进与text-align、父容器布局、首行内容类型、字体缩放之间的耦合关系——漏掉任一条件，位置就偏了。 - 首段重置：
