text-indent: 2em是中文段落首行缩进的基准值，视觉上≈两汉字宽且随font-size等比缩放；失效主因是display非block、Flex/Grid干扰、首行含内联替换元素或高权重样式覆盖，验证需查Computed中text-indent计算值与display属性。
text-indent: 2em 是中文段落缩进的基准值
不是“随便写个数字就行”，text-indent: 2em 是中文排版里被广泛验证过的视觉安全值：它让首行缩进≈两个汉字宽度，且随 font-size 等比缩放。比如字号从 16px 变成 20px，缩进自动从 32px 变成 40px，始终协调。
别用 32px 或 20px —— 高 DPI 屏、浏览器 zoom 到 125% 时，缩进就明显偏小；也别用 2% —— 它按父容器宽度算，窄屏下可能只剩 6px；2ch 虽然语义上像“字符”，但 IE 全不支持，且多数中文字体里 1ch 远小于一个汉字。
为什么加了 text-indent 却没缩进
不是 CSS 写错了，而是浏览器压根没触发“首行”渲染逻辑。常见原因包括：
-
p被设成display: inline或inline-block—— 块级格式化上下文（BFC）不成立，text-indent直接失效 - 父容器是
display: flex或display: grid—— 子元素默认不参与块级布局，缩进被绕过 - 段落开头是
等内联替换元素 —— 缩进发生在该元素左侧，文字看起来没动 - 某处写了
p { text-indent: 0 !important }—— 富文本编辑器输出或 CMS 模板常埋这类坑 - 用了
white-space: nowrap或direction: rtl—— 前者破坏换行，“首行”概念消失；后者反转缩进方向
最快验证方式：打开开发者工具 → Computed 面板 → 查 text-indent 最终计算值是不是 0，再看 display 是不是 block。
Flex/Grid 容器里怎么让缩进生效
这不是 bug，是 CSS 格式化上下文的天然限制：text-indent 要求元素生成块级框，而 flex item 和 grid item 默认不满足。
首选方案是放弃 text-indent，改用 padding-left: 2em —— 它不依赖“首行”语义，对任何布局都生效，视觉效果几乎一致。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
若必须保留 text-indent（比如对接旧打印样式），需同时满足三个条件：
display: block-
width不为auto（flex item 默认就是auto，得显式设width: 100%或具体值） - 父容器触发 BFC，例如加
overflow: hidden或display: flow-root
别在导航菜单、卡片标题这种本就不该有段落语义的地方硬套 text-indent —— 那是间距问题，该用 margin-left 或 padding-left。
首段要不要缩进？怎么安全跳过
中文排版惯例：导语、标题后第一段通常不缩进，以建立视觉起始感。硬写全局 text-indent: 0 容易漏掉或冲突。
稳妥做法是主动排除：
-
p:first-of-type { text-indent: 0; margin-top: 0; }—— 适合结构固定、首段总在最前的页面（如博客正文） - 若首段在
内，可用article > p:first-child更精准定位 - 避免用
:first-child替代:first-of-type—— 中间夹个就会失效
真正容易被忽略的是响应式场景下的动态字体：当 html { font-size: clamp(1rem, 4vw, 1.2rem) } 或 JS 动态改 rem 基准时，2em 仍能自适应，但 2rem 会跳变 —— 这点在夜间模式或系统放大设置下尤为明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
