text-indent和text-align可共用，但需满足渲染条件：p必须为block、禁用flex/grid干扰、避免内联替换元素开头、显式声明text-indent值，且justify不自动带缩进；语义优先时推荐用<blockquote>。
text-indent 和 text-align 能一起用，但不是“设了就生效”，多数视觉错位问题出在盒模型或内容结构上，而不是属性写错了。
为什么 text-indent 缩了却“没对齐”
这不是 text-indent 失效，而是它依赖的渲染上下文被破坏了：
- 父容器用了
display: flex或display: grid，<p>的块级盒行为被覆盖，text-indent不参与布局计算 - 段落开头是
<img>、<svg>或 emoji 等内联替换元素，缩进作用在该元素左侧，文字本身没动 -
text-align: justify开启了，但没配text-indent—— justify 不会自动带首行缩进 - 检查开发者工具的 Computed 面板：
display必须是block（不是inline或flex），且text-indent最终值非 0
text-align: justify + text-indent 怎么配才真对齐
三者缺一不可：
-
text-align: justify必须作用在块级元素（如<p>）上，不能写在<div>或<span>上 -
text-indent必须显式声明，比如p { text-indent: 2em; }，不能指望 justify 自带缩进 - 段落不能以
white-space: nowrap、pre或pre-wrap开头，否则“首行”概念失效 - 中文两端对齐效果差？加
word-break: break-all或overflow-wrap: break-word辅助断行，但慎用——可能割裂词语
替代方案：不用 text-indent 改用 padding-left
当首行缩进总被干扰时，padding-left 更可控，尤其适合以下场景：
立即学习“前端免费学习笔记（深入）”；
- 段落内含图标、SVG 或富文本编辑器插入的内联块
- 父容器是
flex/grid，又不想改结构 - 需要像素级精确（比如缩进
10px），而em单位随字体变化 - 配合
text-align: justify时，padding-left不影响首行盒逻辑，视觉对齐更稳
示例：p { padding-left: 2em; text-align: justify; }。注意：语义上不如 text-indent 严谨，但实操中更少翻车。
别忽略 <blockquote> 这个原生缩进标签
如果只是想让一段文字视觉上“向内缩”，<blockquote> 是语义正确、零样式依赖的方案：
- 浏览器默认给它加了左右
margin，天然缩进 - 不依赖 CSS，即使样式表加载失败也能保持结构意图
- 适合引文、摘录、强调段落等有明确语义的缩进需求
- 若需统一缩进量，可覆盖
blockquote { margin-left: 2em; margin-right: 0; }
真正容易被忽略的，是缩进背后的语义意图——text-indent 是排版控制，<blockquote> 是内容标记，混用或硬套 CSS 往往是因为没先想清楚“这段文字为什么该缩进”。
