正确做法是用 CSS 的 text-indent 属性实现首行缩进，推荐设为 2em（相对字号），仅作用于块级元素，不继承但影响子元素起始位置，与 padding-left 效果本质不同。
用 text-indent 实现首行缩进，不是加空格
直接在文字前敲两个全角空格或 看似简单，但不可靠：换行、复制粘贴、字体变化时容易错位，且语义错误（空格不是排版意图）。正确做法是用 CSS 的 text-indent 属性控制段落首行缩进。
常见误区是以为要设成 2em 就一定等于“两个汉字宽度”——实际取决于当前字体和 font-size。中文排版习惯的“两字符缩进”，推荐用 2em（相对当前字号），比固定像素更健壮。
-
text-indent只作用于块级元素（如<p></p>、<div>），对 <code><span></span>无效 - 值为负数可实现悬挂缩进（如参考文献格式）
- 不继承，但子元素若未重置，会沿用父级缩进后的起始位置（注意嵌套
<p></p>内再套<p></p>的情况） - 误用
padding-left会导致响应式断点下缩进失效（因为它是固定偏移，不随字号缩放） - 表格单元格（
<td>）里用 <code>text-indent有效，但需确保单元格是块级显示或已设display: table-cell（默认就是） - 行内元素如
<span></span>必须先设display: inline-block或block才能生效 - 当段落含浮动元素（如
float: left图片）时，首行可能绕排到浮动元素右侧，此时text-indent仍从容器左边缘计算，视觉上缩进可能被遮挡——需配合clear或 Flex/Grid 布局重构 - 使用
direction: rtl（从右向左）时，text-indent缩进方向自动翻转，即缩进到右边，无需手动改值 - 在
<pre class="brush:php;toolbar:false;"></pre>或white-space: pre元素中，text-indent仍生效，但若首行开头有空格或制表符，会优先渲染这些空白字符，造成“双缩进”假象
text-indent 和 padding-left 别混用
padding-left 是给整个元素加左内边距，整段文字整体右移；而 text-indent 仅缩进第一行，后续行对齐左边界。视觉效果完全不同。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
比如设置 padding-left: 2em 后，段落左边会出现一块空白区域，即使内容只有一行，也占满该宽度；而 text-indent: 2em 下，第二行会紧贴左侧边缘，符合中文段落规范。
立即学习“前端免费学习笔记（深入）”；
兼容性与特殊场景处理
text-indent 在所有现代浏览器包括 IE8+ 都支持，无需前缀。但有三个容易被忽略的边界情况：
一行代码快速验证是否生效
打开浏览器开发者工具，在元素上临时加一句：style="text-indent: 2em; border: 1px solid red;"。如果红色边框完整包裹段落，且第一行明显右移、其余行左对齐，说明生效；如果整段右移或无变化，检查是否元素非块级、被其他样式覆盖（如 text-indent: 0）、或父容器设置了 overflow: hidden 且缩进过大导致裁剪。
真正麻烦的不是设缩进，而是缩进后和其他样式（比如 line-height、margin、Flex 子项对齐）叠加产生的视觉偏差——这种问题得靠实时调试，没法靠预设值解决。
