text-indent仅作用于首行文本盒，无法实现多层嵌套缩进；应使用padding-inline-start配合data-reply-level属性控制层级缩进，并通过role和aria-labelledby保障可访问性。
text-indent 只管首行，真要“深度缩进”——比如回复嵌套三层、每层多缩进 2em——它完全不适用。必须换思路：用 padding-inline-start 配合结构标记。
为什么 text-indent 不能做深度缩进
它只作用于块级元素的“第一行文本盒”，不是整个内容区域；嵌套层级一深，父容器布局（如 display: flex）、内联替换元素（如开头的 <img>）、或 white-space 设置都会让它失效。更关键的是：它无法响应层级变化——你没法写 p[data-level="3"] { text-indent: 6em; } 并指望它在所有上下文里稳定生效。
padding-inline-start 是视觉深度缩进的唯一合理选择
它按文本方向自动适配（LTR 左缩进，RTL 右缩进），不依赖行盒生成，也不受 flex/grid 父容器干扰，兼容性覆盖所有现代浏览器。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
data-reply-level标记层级：<p data-reply-level="2">这是第二层回复</p> - CSS 写成：
[data-reply-level="1"] { padding-inline-start: 24px; } [data-reply-level="2"] { padding-inline-start: 48px; } [data-reply-level="3"] { padding-inline-start: 72px; } - 避免用
margin-left：它会破坏栅格对齐，且在 RTL 页面中反向错乱 - 数值别硬写像素——改用
calc(2rem * var(--level))配合 CSS 变量，方便统一调控
语义和可访问性不能靠缩进补
纯 CSS 缩进只是视觉表现。如果用户靠屏幕阅读器导航，或键盘 Tab 浏览，他们感知不到“这是第几层回复”。
- 必须用
role="article"标记每条回复 - 外层容器加
role="feed" - 用
aria-labelledby指向上一级回复的id，例如：<p id="reply-123">…</p> <p role="article" aria-labelledby="reply-123">对它的回复</p> - 别把
<blockquote></blockquote>当缩进工具用——它只适用于真实引用，且cite必须是 URL
真正难的不是算出缩进多少像素，而是确认 padding-inline-start 在富文本输出、打印样式、CSS-in-JS 注入、以及 iframe 嵌入场景下是否仍被正确计算。上线前务必在开发者工具的 Computed 面板里，逐层点开看最终生效值——别信预设的 class 名字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
