text-indent: 5% 缩进不对，因其按元素自身宽度计算（非字体或父宽），窄屏缩进过小、宽屏过大，且不随字号变化、受换行和布局干扰；推荐用2em替代。
text-indent: 5% 为什么看起来缩进不对
百分比单位在 text-indent 中是合法的，但它的计算基准是**当前元素自身的宽度**，不是字体大小、不是父容器宽度、也不是“两个汉字”——这导致多数中文场景下视觉缩进严重不足或过度。
比如一个 <p> 在窄屏下宽仅 300px，text-indent: 5% 就只缩进 15px，远小于常规“两字符”所需的约 32–40px；而宽屏下若容器撑到 1200px，5% 就变成 60px，首行明显突兀。
- 它不随字号变化：用户放大系统字体时，缩进量不变，文字变大但空白没跟上，排版失衡
- 它受换行影响：段落内容短、单行显示时，缩进仍按整行宽度算，但用户预期是“按字宽缩”
- IE8+ 虽支持，但配合
direction: rtl或white-space: pre时行为不稳定，容易错位
什么时候可以放心用 text-indent: X%
只有明确需要「缩进量随容器宽度弹性伸缩」的特殊排版才适合，比如响应式图文卡片中标题与描述的对齐联动、多栏布局下统一视觉节奏等。
- 必须确保该段落宽度稳定可预期（如设了
max-width: 600px或width: 80%） - 避免用于正文段落、富文本输出、打印样式（PDF 导出常忽略 % 缩进或换算异常）
- 若真要用，建议搭配媒体查询做断点修正：
@media (max-width: 768px) { p { text-indent: 8%; } }
替代方案：比 % 更靠谱的相对单位
想让缩进“随文字走”，优先选 em 或 ch：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
text-indent: 2em：最通用。1em = 当前font-size，缩进始终≈当前字号的两倍，中文字号 16px 时≈32px，接近传统两字符 -
text-indent: 2ch：语义更准（1ch ≈ “0” 字符宽度），但 IE 不支持，且多数中文字体里 1ch 明显小于一个汉字，实测常偏小 - 完全避免
rem：若项目用 JS 动态改html { font-size }（如夜间模式切换），text-indent会意外跳变
表格里用 text-indent: 5% 会失效吗
在 <td> 中直接写 text-indent: 5% 很可能没反应，不是单位问题，而是渲染机制限制：
-
<td>默认是display: table-cell，其内部格式化上下文不总是生成标准“首行盒” - 若单元格内容单行、又设置了
text-align: center，缩进后文字被居中拉回，视觉上等于没动 - 富文本编辑器导出的 HTML 常带
text-indent: 0 !important，直接覆盖你的百分比值
更稳妥的做法是放弃 text-indent，改用 padding-left: 2em —— 它不依赖首行语义，所有浏览器都认，且效果稳定。
