text-indent 控制首行缩进，line-height 控制行高，二者作用维度不同、可安全共存；混用 margin/padding 或误用 line-height 模拟缩进会导致段落间距失控、行距错位。
text-indent 控制首行缩进，line-height 控制行高，二者互不干扰、各司其职——混用 margin 或 padding “凑”效果，反而会让段落间距失控、行距错位。
为什么不能用 line-height 模拟段落缩进
常见错误是把 line-height 调大（比如设成 3），指望靠“拉高行距”让第二行看起来像缩进了。这完全误解了它的作用：它只控制**同一段内各行文字基线之间的距离**，不影响首行起始位置。结果往往是整段文字被撑开、行间留白不均，而首行依然顶格。
更麻烦的是，若段落含多行文本，line-height 还会放大所有行的垂直空间，和真实排版需求背道而驰。
text-indent 和 line-height 可以安全共存
它们作用于不同维度，只要不手动破坏盒模型，就能稳定协作：
-
text-indent: 2em只推第一行开头，后续行左对齐不变 -
line-height: 1.6（推荐无单位值）均匀拉伸段内所有行的垂直间距 - 两者叠加后，首行缩进 + 行间松紧清晰分离，视觉节奏可控
- 若某段需取消缩进（如首段或标题），只需单独重置
text-indent: 0，line-height保持继承不变
容易被忽略的兼容性细节
真正出问题的地方往往不在写法本身，而在上下文干扰：
- 父容器用了
display: flex或display: grid，text-indent可能失效——不是属性错了，而是格式化上下文变了 -
line-height设成px（如24px）会导致小字号下行距过紧、大字号下过松；用无单位值（如1.6）才真正随字体缩放 - 表格单元格（
<td>）里 <code>text-indent易被white-space: nowrap抑制，调试时先看 computed 样式里white-space是否为normal - 富文本编辑器输出的
<p></p>常带style="text-indent: 0"，得用p[style] { text-indent: 2em !important; }强制覆盖
移动端与可访问性要额外验证
2em 在 12px 字体下仅约 24px，部分安卓 WebView 渲染可能不够明显；若用户开启系统级字体放大（如 iOS「更大字体」），line-height 无单位值能自适应，但 text-indent 若用 px 就会僵住。最稳妥的做法是：在真机上打开开发者工具，直接修改 font-size，观察 text-indent 和 line-height 的像素变化是否同步——这是比查文档更快的验证方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
