CSS段落缩进主要通过text-indent属性实现，支持px、em、rem和%等单位，推荐使用em或rem以适应响应式设计，并可通过媒体查询在不同设备上调整缩进量；需注意text-indent仅对块级元素生效，避免被优先级更高的样式覆盖，同时排查flex或grid布局及overflow:hidden导致的显示异常。
p 标签默认没有缩进，所谓“段落缩进”通常是靠 text-indent 或外边距/内边距实现的，但一旦项目里存在全局样式（比如 body *、* { margin: 0; } 或重置库如 Normalize.css），就极易覆盖或干扰局部段落样式。
为什么 text-indent 在某些情况下不生效？
常见于以下场景：
- 父容器设置了
overflow: hidden或text-overflow: ellipsis，导致缩进部分被裁剪 - CSS 优先级不足：全局重置规则（如
*, *::before, *::after { box-sizing: border-box; }）虽不直接改text-indent，但可能连带引入更宽泛的继承链，压过局部声明 - 使用了 CSS-in-JS 或 Shadow DOM，
text-indent被 scoped 隔离，而全局样式却穿透进来 -
p是行内元素（错误认知）——其实它是块级元素，但若被设为display: inline或inline-block，text-indent仍有效；不过若父元素font-size: 0，则2em缩进实际为 0px
如何避免 p 的缩进被 body * 类全局规则覆盖？
关键不是“禁用全局样式”，而是让段落缩进声明具备足够优先级和明确作用域：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 不用
p { text-indent: 2em; }这类宽泛选择器，改用带命名空间的类，例如.article-content p或.rich-text p - 在类名后加
!important是下策；更稳妥的是提高特异性，比如.article-content > p:first-of-type - 检查是否启用了 CSS 重置中的
all: unset—— 它会清空text-indent，此时必须显式重设 - 若用 Prettier 或 ESLint 自动格式化，确认未开启
htmlWhitespaceSensitivity: "strict"，否则可能意外删掉用于视觉对齐的空白，让缩进看起来“消失”
margin-left 替代 text-indent 的适用边界
当需要整段左移（不只是首行），或要兼容 RTL 文本、或缩进需响应式变化时，margin-left 更可控。但要注意：
-
margin-left会参与外边距折叠（margin collapse），尤其在相邻p之间，可能导致间距小于预期 - 若父容器有
padding-left，叠加后缩进量 =padding-left+margin-left，容易超限 - 全局样式中若有
p { margin: 1em 0; }，它会覆盖你单独写的margin-left，除非你写成p { margin: 1em 0 1em 2em; }或用margin-inline-start（现代写法，兼容性需查 CanIUse）
真正麻烦的不是怎么加缩进，而是缩进值在不同上下文里被谁改了、什么时候改的——建议在 DevTools 的 Computed 面板里点开 text-indent，逐层看是哪条规则 override 了它，比猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
