text-indent是唯一语义正确的首行缩进方式，专为段落首行设计，仅作用于块级元素第一行；需确保元素display为block、无text-indent:0!important覆盖，推荐使用2em单位以保持响应性和语义准确性。
text-indent 是唯一语义正确的首行缩进方式
直接写两个全角空格或用 堆出来，看着像缩进，但一复制、一换行、一改字体就错位，还破坏可访问性和 SEO。真正可靠的做法，是用 CSS 的 text-indent 属性——它专为“首行缩进”这个语义而生，浏览器原生支持，且只影响第一行。
关键点在于：text-indent 只对块级元素生效，<p></p> 默认就是块级，但以下情况会失效：
-
<p></p>被设成display: inline或inline-block - 父容器用了
display: flex或display: grid，导致<p></p>的块格式化上下文被覆盖 - 段落开头是
<img>、<svg></svg>等内联替换元素，缩进计算起点仍是容器左边缘，但视觉上被遮挡 - 某处高权重样式写了
text-indent: 0 !important（常见于富文本编辑器输出）
最快验证方法：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。
2em 单位最稳，别乱用 px 或 %
中文排版习惯说“空两格”，但 2em 并不是硬编码两个汉字宽度，而是当前 font-size 的两倍。字号放大时缩进同步变宽，系统缩放、DPI 变化、用户调大浏览器字体时都不失准。
其他单位的问题很实际：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
32px：字体调到 24px 后，缩进就显得太窄，阅读节奏断裂 -
2%：在 320px 宽的手机屏上仅缩进 6.4px，远不够一个汉字宽度 -
2rem：若项目用 JS 动态改了html { font-size }（比如夜间模式），缩进会突然跳变 -
2ch：语义更贴近字符宽度，但 IE 不支持，且多数中文字体里1ch远小于一个汉字
所以，除非你做印刷级静态页并锁定所有字体参数，否则坚持用 text-indent: 2em 就行。
Flex/Grid 容器里 text-indent 失效怎么办
这不是 bug，是 CSS 格式化上下文变更的自然结果。Flex item 和 Grid item 默认不触发块级盒的首行缩进逻辑。
别强行加 display: block 然后赌运气——更可靠的是换思路：
- 首选
padding-left: 2em：它不依赖“首行”语义，对任何容器里的子元素都生效，视觉效果几乎一致 - 若必须保留
text-indent（比如要兼容旧打印样式），给<p></p>显式加display: block，并确保其width不是auto（flex item 默认width: auto可能导致退化） - 别在导航菜单、卡片标题这类本就不该有段落缩进语义的地方硬套
text-indent——那是间距问题，该用margin-left或padding-left
首段不缩进、段间距、行距别混在一起
很多人把缩进、段距、行高全塞进一个 margin 或 padding 里，结果一调就全乱。它们职责分明：
-
text-indent：只管首行缩进 -
margin（如margin: 1.2em 0）：控制段与段之间的空隙 -
line-height（推荐无单位值，如line-height: 1.6）：控制行与行之间的高度
特别注意首段：通常不该缩进，也常需去掉顶部外边距。一句就能收住：
code>p:first-of-type {
margin-top: 0;
text-indent: 0;
}
最后提醒一句：缩进不是靠“看起来像”，而是靠语义正确 + 渲染条件满足。哪怕只改一行 CSS，也要先看 computed 值，再动手。否则修半天，可能只是 display 没 block 而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
