text-indent专用于块级元素首行缩进，不影响整段位置；推荐用2em实现中文两字符缩进，避免margin/padding导致整体偏移，负值需配合padding-left防溢出。
用 text-indent 控制段落首行缩进，不是 margin
HTML 段落（<p>）的“缩进”通常指首行缩进，比如中文排版常见的两个汉字宽度。这不是靠 margin-left 实现的——那样会让整段左移，破坏对齐；正确方式是用 CSS 的 text-indent 属性。
常见错误现象：margin-left: 2em 后，整段文字向右偏移，导致段首和段中都空出空白，后续段落无法对齐左侧基准线。
-
text-indent只影响第一行开头的空白，其余行保持左对齐 - 值推荐用
2em（约等于两个中文字符宽），避免用px（响应式下不灵活） - 负值可行（如
text-indent: -1em），但需配合padding-left或margin-left防止文字溢出容器
text-indent 在块级元素中的继承与重置
该属性会继承，但只对“块容器”生效（如 <p>、<div>、<blockquote>），对内联元素（如 <span>）无效。如果你套了多层 <div>，又没显式设置 text-indent: 0，可能意外出现嵌套缩进。
使用场景：文章正文、引用块、带标题的说明段落。
立即学习“前端免费学习笔记（深入）”；
- 若父容器设了
text-indent: 2em，子<p>也会继承——除非你写p { text-indent: 2em; }显式覆盖 - 列表项（
<li>）默认无缩进，但若它里面包了<p>，那个<p>仍受自身样式控制 - 注意
display: flex或display: grid容器内的子<p>，text-indent依然有效，不受布局模式影响
兼容性与特殊处理：IE、RTL 文本、换行行为
text-indent 在所有现代浏览器包括 IE8+ 都稳定支持，但有两个易忽略点：
- 在 RTL（从右向左）文本环境（如阿拉伯语、希伯来语）中，
text-indent向右缩进的是“首行末尾”，即逻辑上的“起始侧”。此时建议用text-indent: 2em+direction: rtl组合测试视觉效果 - 如果段落内含
<br>换行，只有第一行受text-indent影响；后续换行行不缩进 - 慎用
text-indent: -9999px做“隐藏文字”SEO 技巧——现在多数搜索引擎已识别并可能降权，且对屏幕阅读器不友好
不要用 margin 或 padding 替代首行缩进
有人试过给 <p> 加 padding-left: 2em，结果发现段落整体变宽、可能触发水平滚动条或破坏栅格对齐；也有人用 margin-left，导致段落脱离正常文档流位置。
根本区别在于语义：text-indent 是排版属性，描述“文字如何排布”；margin/padding 是盒模型属性，描述“盒子如何占位”。混用会放大维护成本，尤其在响应式断点切换时。
- 移动端
@media中，优先调整text-indent值（如改为1.5em），而不是改margin - 用 CSS 自定义属性可统一管理：
:root { --indent: 2em; }，然后p { text-indent: var(--indent); } - 如果真需要“段落整体缩进”（比如缩进整段引文），应明确用
padding-left，但这时已不属于“首行缩进”范畴，而是容器级留白
真正要注意的，是别把 text-indent 和盒模型边距当成同一件事去调——它们作用对象不同、影响范围不同、响应行为也不同。一个改字，一个挪框，弄混了，后面加 @media 或换字体时就容易突然错位。
