text-indent 是段落首行缩进的唯一语义正确方案，专用于块级元素首行，不影响盒模型；误用 margin-left 会破坏布局，负值可实现悬挂缩进；空格、全角/半角空格及编辑器缩进均非可靠替代方案。
text-indent 是段落缩进的唯一语义正确方案
HTML 本身没有“段落缩进”这个语义，text-indent 是 CSS 中专为此设计的属性，它只作用于段落（p、div 等块级元素）的第一行，不影响后续行，也不改变元素盒模型尺寸。浏览器渲染时会严格按字体度量计算 2em 或 1.5rem 的实际像素值，响应式友好。
常见误用是给 p 加 margin-left：这会让整段左移，破坏栅格对齐；若父容器有 padding 或 flex 布局，还可能触发意外换行或溢出。
-
text-indent在display: inline、float、flex容器子项中会失效，需检查父级 display 类型 - 负值如
text-indent: -1.5em可实现悬挂缩进，但要配合padding-left防止文字被截断 - 如果段落内含
inline-block元素（如图标），text-indent仍只推首行文字，不推内联块
是空格缩进，但不是排版方案
是 HTML 实体，代表一个不换行空格，宽度约等于当前字体下一个普通空格。它本质是**内容字符**，不是样式控制手段。在 p 开头连写两个： 文本，确实能“看起来”缩进，但问题极多：
- 复制粘贴时容易被编辑器过滤或转义成普通空格，缩进消失
- 屏幕阅读器会读出“空格、空格、文本”，影响可访问性
- 响应式下字体缩小时，
- 无法与 CSS 变量或主题系统联动，改缩进值要全局搜索替换
全角空格 和半角空格 不是可靠替代
中文环境下有人用全角空格 （U+3000）模拟两字缩进，因其宽度固定≈一个汉字。但它仍是内容字符，有同样缺陷：破坏语义、干扰复制、不可响应、SEO 不友好。且在等宽字体（如代码块、终端模拟器）里， 宽度会远超汉字，导致错位。
立即学习“前端免费学习笔记（深入）”；
半角空格 （U+2002）更不稳定——不同字体下宽度浮动大，iOS Safari 对某些 Unicode 空格支持不一致，曾出现过渲染为空白或方框的情况。
真正需要字符级占位的场景（如邮件模板、纯静态页），应限制为单个 且仅用于分隔，绝不用于首行缩进。
VSCode 缩进设置和页面渲染缩进是两回事
你在 VSCode 里设 "editor.tabSize": 4，只是让编辑器在你按 Tab 键时插入 4 个空格，它**不影响浏览器如何渲染页面**。HTML 文件保存后，这些空格在源码里是真实存在的空白字符，但浏览器解析 HTML 时会把连续空白（包括换行、制表符、空格）合并为单个空格，并忽略行首/行尾空白——所以你在代码里缩进 4 层，页面上根本看不到任何缩进效果。
换句话说：VSCode 的缩进是给开发者看的结构提示，text-indent 才是给用户看的视觉缩进。两者目标不同，不能互相替代。
最容易被忽略的是：当用 text-indent 后又手动在 HTML 源码开头加空格，会导致首行实际缩进 = text-indent 值 + 多余空格宽度，尤其在小屏设备上叠加后过于突兀。应该删净所有段落开头的无意义空白字符。
