text-indent仅对块级元素生效，<p>默认支持，但<span>等内联元素需设display:block；推荐用2em单位自适应缩进，避免px；须限定作用域（如.rich-text p）防止误伤标题、代码块等非段落元素。
用 text-indent 控制段落首行缩进，但只对块级元素生效
HTML 中的 <p> 默认是块级元素，所以直接加 text-indent 就能缩进首行。但如果你给的是一个 <div> 包裹的区域，而里面混着 <span> 或内联元素，那缩进不会出现——因为 text-indent 对非块级、非表单元格、非弹性/网格容器内的子项无效。
实操建议：
- 确保目标段落是块级上下文：检查是否被
display: inline或display: flex父容器意外压制（比如父级用了display: flex，子<p>会变成 flex item，text-indent失效） - 缩进单位优先用
em（如text-indent: 2em），这样能随字体大小自适应；避免用固定像素（px）导致小屏下缩进过大 - 若区域由 CMS 或富文本编辑器生成，可能内联样式或 class 冲突，用浏览器开发者工具检查 computed 样式里
text-indent是否被覆盖或计算为0px
给指定区域加 class 后统一控制，别用全局 p 选择器
如果只想缩进某个栏目下的段落（比如文章正文区 <article class="post-content">），直接写 p { text-indent: 2em } 会污染全局，影响导航、按钮文字等所有段落。
正确做法是限定作用域：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给容器加语义化 class，例如
<section class="rich-text"> - 写 CSS：
.rich-text p { text-indent: 2em; margin-top: 0; }（顺手清掉首段顶部空白，更符合中文排版习惯） - 如果区域里还有
<h2>、<ul>等，它们不该缩进，所以不要写成.rich-text * { text-indent: ... }——通配符会误伤标题和列表项
遇到 <pre> 或代码块混入时，缩进会被继承，需单独重置
如果指定区域内包含 <pre>、<code> 或高亮代码块，它们通常也匹配 p 的父选择器，结果代码块首行也被缩进，破坏等宽对齐。
处理方式很简单：
- 在同一样式规则后追加重置：
.rich-text pre, .rich-text code { text-indent: 0; } - 如果用了 Prism.js 或 highlight.js，它们的代码容器可能是
<pre class="js">，那就补上.rich-text pre[class*="language-"] { text-indent: 0; } - 注意：不要用
!important，靠选择器权重或顺序就能解决；否则后续维护时容易踩坑
移动端适配时，text-indent 和 padding-left 别混用
有人为了“让整段左移”误用 padding-left 替代 text-indent，这会导致整个段落盒模型变宽，在窄屏下触发横向滚动或换行异常。
关键区别：
-
text-indent只推首行文字，段落宽度不变，适合阅读流排版 -
padding-left推动整块内容盒，影响布局宽度，适合做视觉留白而非文本缩进 - 响应式场景下，可用媒体查询微调缩进值：
@media (max-width: 768px) { .rich-text p { text-indent: 1.5em; } }
缩进这件事本身简单，但真正难的是判断「该不该缩」——中文段落是否首行缩进，取决于上下文语义（比如引文、说明文字、诗歌）和整体设计系统，而不是机械套用 CSS 属性。
