text-indent是唯一正统的首行缩进手段，但仅对块级元素生效，在flex/grid容器中常失效；应优先用padding-left替代，并注意单位选择、继承性及line-height协调。
text-indent 是唯一正统、语义正确的首行缩进手段，但它只对块级元素生效，且在 flex/grid 容器里大概率失效——别硬套，先看场景。
text-indent 只作用于块级元素，行内元素加了也没用
浏览器根本不会渲染 <span style="text-indent: 2em">文字</span> 的缩进。它只认生成 block box 的元素：<p>、<div>、<h3>，或显式设了 display: block 的元素。
- 常见错误：给
<span>或<a>直接加text-indent，页面毫无反应 - 正确做法：确保目标是块级容器；若必须缩进行内内容，改用
display: block包一层，或换padding-left - 注意继承性：父元素设了
text-indent: 2em，子<p>也会缩进，需手动text-indent: 0重置
flex 或 grid 容器中 text-indent 失效，该用 padding-left
当 <p> 是 display: flex 或 display: grid 的直接子元素时，它的块级盒行为被格式化上下文覆盖，text-indent 常常不触发。
- 实操建议：优先用
padding-left: 2em替代，视觉效果一致，且完全可控 - 若坚持用
text-indent，得额外加display: block并确认没被align-self或justify-content干扰 - 别在导航菜单、卡片标题这类 UI 组件上靠
text-indent“假装缩进”，那本质是布局间距问题，该调margin或padding
2em ≠ 两个汉字宽度，中文排版建议用 ch 或 rem
2em 是当前 font-size 的两倍水平尺寸，不是字符数。SimSun、Microsoft YaHei 等中文字体下，一个汉字实际宽度往往略大于 1em，导致缩进偏大；而等宽字体下又可能偏小。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 更贴近预期的写法：
text-indent: 2ch（取“0”的宽度为单位），但注意ch在中文环境仍非绝对精准 - 兼顾响应与一致性：用
text-indent: 1.6rem，配合根字号统一调控，比纯em更稳定 - 移动端要注意：系统字体放大或 viewport 缩放时，
em缩进会同比放大，可能撑破容器，建议加max-width限制或用视口单位兜底
line-height 过小会让缩进后的首行“粘”在第二行上
text-indent 只移动首行文字起始位置，不改变行高计算逻辑。当 line-height 设置过小（如 1 或 1.2），尤其配合大字号时，首行末尾和第二行开头容易视觉重叠。
- 安全值参考：
line-height: 1.5~1.7，中文段落推荐1.6 - 若必须压窄行高，可微调
margin-bottom补偿视觉间隙，而不是强行缩小line-height - PDF 导出或打印样式中，
text-indent行为可能和屏幕不一致，务必实测导出结果
真正麻烦的不是怎么写 text-indent，而是判断它该不该出现——很多你以为是“缩进”的需求，其实是 padding、margin 或容器布局的问题。先看清结构，再动属性。
