推荐使用text-indent: 2ch实现首行缩进，因其以“0”字符宽度为基准，在多数中文字体下更稳定；若需兼容ie，可fallback为text-indent: 2em。
text-indent 的单位选择直接影响缩进效果
直接用 text-indent: 2em 看似合理，但实际在中文字体下可能缩进过宽或不稳——因为 em 是相对于当前字体的 小写字母 m 的宽度，而中文字体里“m”并不存在，浏览器会按 font-size 推算，不同字体（如 "Microsoft YaHei" vs "Noto Sans CJK"）推算结果差异明显。
更可靠的做法是用 ch 单位：text-indent: 2ch。它表示“当前字体中字符 ‘0’ 的宽度”，对等宽/准等宽中文字体（绝大多数中文字体中，中文字符宽度接近 ch）效果稳定。若需兼容老浏览器（IE 不支持 ch），可 fallback：text-indent: 2em; text-indent: 2ch;（后写者覆盖前者）。
注意 font-family 对 ch 单位的实际影响
ch 虽然理论上基于 “0”，但中文字体中，全角字符（如“一”）宽度通常 ≈ 1ch，前提是该字体确实把中文设为等宽。但有些字体（如部分思源黑体变体、自定义 WebFont）可能微调了中文字符宽度，导致 2ch 略小于两个汉字。
- 验证方法：在元素内写两个“一”字，用
text-indent缩进，对比是否对齐 - 稳妥方案：用
text-indent: 32px（假设字号为16px，2×16=32），但需同步维护字号与缩进比例 - 现代项目推荐：搭配 CSS 自定义属性统一管理：
:root { --char-width: 16px; } p { text-indent: calc(2 * var(--char-width)); }
避免被 inline 元素或 margin 折叠干扰缩进
如果段落内第一个子元素是 <span></span>、<em></em> 或其他 inline 元素，且该元素设置了负 margin-left，可能视觉上“吃掉”首行缩进；另外，若父容器有 text-align: justify 或使用了 line-height 极小值，也可能让缩进看起来错位。
- 检查是否意外设置了
margin-left: -2em等负边距 - 确保
text-indent应用于块级元素（如p、div），而非 inline 元素 - 不要和
padding-left混用——后者缩进整块，text-indent只缩进首行
Flex/Grid 容器中的段落可能丢失缩进
当 p 标签被包裹在 display: flex 或 display: grid 的父容器中，且未显式设置 align-items: flex-start 或 justify-content: flex-start，某些浏览器（尤其是 Safari）会因基线对齐逻辑干扰 text-indent 渲染，导致首行缩进失效或偏移。
解决方式很简单：给段落加一句 align-self: flex-start;（对 Flex 子项）或确保父容器未设置 align-items: center 类似值。也可以临时加 vertical-align: top;（仅对 inline-level 生效，慎用）。
真正容易被忽略的是：缩进不是“绝对像素对齐”，而是排版节奏的一部分。两个中文字符的视觉分量，在字号变化、行高拉伸、字体渲染引擎（macOS Core Text vs Windows GDI）下都略有浮动——接受这种轻微弹性，比强行像素对齐更符合中文排版实际。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
