应使用 text-indent 实现段落首行缩进，推荐值为 2em；避免误用 margin-left 或 padding-left；所有自然段必须用 <p> 标签；注意第三方库重置、RTL 方向、打印样式及 CMS 输出缺失 <p> 的兼容处理。
用 text-indent 实现段落首行缩进
HTML 本身不提供“段落缩进”的语义标签，必须靠 CSS 控制。最直接、最可靠的方式是给 <p> 设置 text-indent，它只影响首行，不影响整个块的宽度或布局。
常见错误是误用 margin-left 或 padding-left：它们会让整段左移，破坏对齐，还可能影响列表、引用等嵌套结构。
-
text-indent值推荐用2em（约两个中文字符宽），比固定像素更适配字体大小变化 - 若页面含中文排版，注意某些字体下
2em可能略宽，可试1.8em - 对不需要缩进的段落（如标题后紧跟的导语、代码说明），单独加类重置：
.no-indent { text-indent: 0; }
避免 <blockquote> 或 <div> 误替代 <p>
有人用 <div> 包文字再设 padding-left 模拟缩进，这既丢失语义，又让屏幕阅读器无法识别段落边界。同理，<blockquote> 是为引用内容设计的，滥用会误导语义和搜索引擎。
- 所有自然段必须用
<p>，这是唯一标准段落容器 - 如果 CMS 输出的 HTML 没有
<p>（比如纯换行），需在渲染层补全，不能靠 CSS “假装”有段落 - 富文本编辑器粘贴内容时容易丢
<p>，建议后端或前端做一次简单清洗：str.replace(/\n\s*\n/g, '<p>')</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill8961" title="html-to-pptx-converter">html-to-pptx-converter</a> <p>使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
兼容性与特殊场景处理
text-indent 在所有现代浏览器和 IE9+ 都支持，无兼容风险。但要注意几个易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 当
<p>内含<img>或<span>等行内元素时，text-indent仍只作用于第一行文字，图片位置不受影响 - 使用
direction: rtl（从右向左）时，text-indent会向右缩进，符合逻辑，无需额外调整 - 打印样式表中若禁用了缩进（比如为节省纸张），记得在
@media print里显式覆盖：text-indent: 0;
别忘了清除用户自定义样式的干扰
很多网站引入了第三方 UI 库（如 Bootstrap、Tailwind），它们可能全局重置了 p 的 text-indent 为 0。这时候光写 p { text-indent: 2em; } 不生效，得提高优先级：
body p {
text-indent: 2em !important;
}
更稳妥的做法是加一个明确的作用域类，比如 article.content p，避免被其他规则意外覆盖。缩进看着小，但一旦混入编辑器输出、Markdown 渲染、SSR 预渲染等环节，很容易漏掉一两个段落——这种问题往往上线后才被发现，且难以批量修复。
