text-indent 是实现段落首行缩进最语义正确且兼容性最佳的方式，推荐使用 2em 值作用于纯说明性 元素，排除首段及 、 等结构化元素，避免误用 margin/padding 或绝对单位。

用 text-indent 给段落首行缩进最直接

说明文段落需要首行缩进（比如中文习惯的 2 字符），text-indent 是唯一语义正确、浏览器支持完善的方式。它只影响第一行开头，不影响后续行或整个块的左边界，和排版需求完全匹配。

常见错误是误用 margin-left 或 padding-left：它们会让整段左移，破坏与标题、列表等相邻元素的对齐关系，还可能触发不必要的水平滚动。

实操建议：

• text-indent 值推荐用 2em（相对当前字体大小），比固定像素更适配不同字号和缩放
• 如果段落内含 <img> 或 <span></span> 等行内元素，text-indent 依然只作用于文字起始位置，无需额外处理
• 注意：text-indent 对 display: inline 元素无效，必须用在块级元素（如 <p></p>、<div>）上 <h3>避免对 <code><blockquote></blockquote> 或列表项误加 text-indent

  说明文中常混用引用、定义列表（<dl></dl>）、编号步骤等。这些结构已有默认缩进或视觉层级，盲目统一加 text-indent 会导致嵌套混乱。

  例如：<blockquote></blockquote> 默认有左右 margin，再加 text-indent 会让首行缩进叠加，看起来像多缩了一层；<li> 的项目符号可能被顶出可视区。

  安全做法：

  • 只给纯说明性 <p></p> 加 text-indent，用类名明确限定范围，比如 <p class="article-paragraph"></p>
  • 用 CSS 选择器排除干扰项：p:not(blockquote > p):not(li > p) { text-indent: 2em; }
  • 若需对 <dd></dd> 等做类似缩进，单独写规则，不复用同一类名

  中英文混排时 2em 可能偏大，需微调

  中文字符宽度约等于 1em，但英文字符和标点（如逗号、括号）实际占宽小得多。当段首是英文单词或数字时，2em 缩进会显得空隙过大，破坏节奏感。

  

  html-to-pptx-converter

  使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

  下载

  这不是 bug，而是 em 单位的固有特性——它基于当前 font-family 的“M”字宽，而中英文字体度量差异大。

  应对方式：

  • 优先保证中文主体体验，保持 2em；绝大多数用户不会盯着段首空格数
  • 极端要求精确时，可用 ch 单位：text-indent: 2ch（1 ch ≈ 数字 "0" 的宽度），对等宽字体更准，但兼容性略低（IE 不支持）
  • 不要用 text-indent: 32px 这类绝对值——响应式布局下，小屏设备上会撑破容器

  用 :first-of-type 或 :nth-child() 控制是否跳过首段

  说明文开头常有标题、导语或图注，第一个 <p></p> 往往不该缩进（比如紧接标题后的引导句），否则视觉上像另起一层内容。

  这时候不能靠删 HTML 或加空类来“打补丁”，CSS 本身就能精准跳过。

  推荐写法：

  • p.article-paragraph:not(:first-of-type) { text-indent: 2em; } —— 简单可靠，适用于连续 <p></p> 流
  • p.article-paragraph:nth-child(n+2) { text-indent: 2em; } —— 更严格，按 DOM 顺序判断，哪怕中间插了 <div> 也有效 <li>避免用 <code>:first-child，因为父容器里第一个子元素可能是 <h2></h2>，不是 <p></p>

  真正麻烦的是那些带图标、角标或浮动元素的说明段落——text-indent 会和 float 或 position: absolute 冲突，缩进基准可能偏移。这种场景得先理清文档流，而不是硬调数值。