text-indent: 2em失效主因非代码错误，而是富文本嵌套导致父容器为flex/grid、首行含img/svg内联替换元素，或被编辑器内联!important样式覆盖；须用开发者工具验证computed中display为block且text-indent值确为2em。
为什么直接写 p { text-indent: 2em; } 在新闻页里常失效
不是 CSS 写错了，而是新闻正文常嵌在富文本编辑器输出的 HTML 里，存在多个干扰层：父容器用了 display: flex 或 display: grid，p 的块级盒行为被覆盖；段落开头插了 <img> 或 <svg></svg>，缩进作用在图像左侧而非文字；更常见的是编辑器自带的内联样式写了 text-indent: 0 !important，直接压掉你的规则。
最快验证方式：打开开发者工具 → 选中目标 p → 切到 Computed 面板 → 看 display 是否为 block，且 text-indent 最终值是否真为 2em。如果不是，说明被覆盖或环境不支持。
text-indent: 2em 是标准，但得配对重置首段和末段
新闻正文首段通常是导语，按出版惯例不缩进；末段后常接版权信息或分隔线，多出的 margin-bottom 会撑开空白。浏览器默认给 p 设了 margin: 1em 0，必须显式覆盖：
.article p:first-child { text-indent: 0; margin-top: 0; }.article p:last-child { margin-bottom: 0; }- 别用
:first-of-type，富文本可能混入h2、figure等元素，导致误判
表格、Flex 容器、<td> 里缩进不生效怎么办
<p><code>text-indent 在 <td> 里大概率无效，因为 <code>display: table-cell 不生成标准“首行盒”。调试时给 td 加 background: #ff0，如果文字仍紧贴左边缘，说明缩进根本没触发。
稳妥解法只有两个：
- 统一用
td, th { padding-left: 2em; }——不依赖行盒，所有浏览器都认 - 若导出 PDF 需严格匹配印刷规范（比如引用栏必须首行缩进），改用包裹：
<td><div style="text-indent: 2em;">内容</div></td>
移动端小字号下 2em 看起来缩进不足？别硬调数值
新闻页常设 font-size: 14px 或 12px，此时 2em = 24px / 28px，视觉上确实偏窄。但改成 30px 或 2.5em 会破坏响应式逻辑：系统缩放 150% 时，缩进会突然跳变。
真正该做的是分层控制：
- 基础缩进保持
2em，确保语义和可访问性 - 针对小屏加媒体查询：
@media (max-width: 480px) { .article p { font-size: 16px; } }，让字号先涨上去，缩进自然变宽 - 避免用
ch单位（如2ch），中文下它通常远小于一个汉字宽度，且 IE 完全不支持
真正难的不是写对那行 text-indent: 2em，而是确认它在富文本输出、Flex 布局、打印预览、屏幕阅读器里都按预期工作——每个环节都可能悄悄绕过这个属性。动手前先盯死 Computed 面板，比反复调数值管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
