text-indent 是实现段落首行缩进最语义正确且兼容性最佳的方式，推荐使用 2em 值作用于纯说明性 <p> 元素，排除首段及 <blockquote>、<li> 等结构化元素，避免误用 margin/padding 或绝对单位。
用 text-indent 给段落首行缩进最直接
说明文段落需要首行缩进（比如中文习惯的 2 字符），text-indent 是唯一语义正确、浏览器支持完善的方式。它只影响第一行开头，不影响后续行或整个块的左边界，和排版需求完全匹配。
常见错误是误用 margin-left 或 padding-left：它们会让整段左移，破坏与标题、列表等相邻元素的对齐关系，还可能触发不必要的水平滚动。
实操建议：
-
text-indent值推荐用2em（相对当前字体大小），比固定像素更适配不同字号和缩放 - 如果段落内含
<img>或<span>等行内元素，text-indent依然只作用于文字起始位置，无需额外处理 - 注意：
text-indent对display: inline元素无效，必须用在块级元素（如<p>、<div>）上
避免对 <blockquote> 或列表项误加 text-indent
说明文中常混用引用、定义列表（<dl>）、编号步骤等。这些结构已有默认缩进或视觉层级，盲目统一加 text-indent 会导致嵌套混乱。
立即学习“前端免费学习笔记（深入）”；
例如：<blockquote> 默认有左右 margin，再加 text-indent 会让首行缩进叠加，看起来像多缩了一层；<li> 的项目符号可能被顶出可视区。
安全做法：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 只给纯说明性
<p>加text-indent，用类名明确限定范围，比如<p class="article-paragraph"> - 用 CSS 选择器排除干扰项：
p:not(blockquote > p):not(li > p) { text-indent: 2em; } - 若需对
<dd>等做类似缩进，单独写规则，不复用同一类名
中英文混排时 2em 可能偏大，需微调
中文字符宽度约等于 1em，但英文字符和标点（如逗号、括号）实际占宽小得多。当段首是英文单词或数字时，2em 缩进会显得空隙过大，破坏节奏感。
这不是 bug，而是 em 单位的固有特性——它基于当前 font-family 的“M”字宽，而中英文字体度量差异大。
应对方式：
- 优先保证中文主体体验，保持
2em；绝大多数用户不会盯着段首空格数 - 极端要求精确时，可用
ch单位：text-indent: 2ch（1ch≈ 数字 "0" 的宽度），对等宽字体更准，但兼容性略低（IE 不支持） - 不要用
text-indent: 32px这类绝对值——响应式布局下，小屏设备上会撑破容器
用 :first-of-type 或 :nth-child() 控制是否跳过首段
说明文开头常有标题、导语或图注，第一个 <p> 往往不该缩进（比如紧接标题后的引导句），否则视觉上像另起一层内容。
这时候不能靠删 HTML 或加空类来“打补丁”，CSS 本身就能精准跳过。
推荐写法：
-
p.article-paragraph:not(:first-of-type) { text-indent: 2em; }—— 简单可靠，适用于连续<p>流 -
p.article-paragraph:nth-child(n+2) { text-indent: 2em; }—— 更严格，按 DOM 顺序判断，哪怕中间插了<div>也有效 - 避免用
:first-child，因为父容器里第一个子元素可能是<h2>，不是<p>
真正麻烦的是那些带图标、角标或浮动元素的说明段落——text-indent 会和 float 或 position: absolute 冲突，缩进基准可能偏移。这种场景得先理清文档流，而不是硬调数值。
