text-indent是唯一可靠、语义正确且浏览器原生支持的首行缩进手段；推荐使用2em单位，因其基于当前font-size自适应缩放，精准匹配中文“空两字”习惯，兼顾响应式、无障碍与兼容性。
用 text-indent 是最直接的办法
HTML 本身不处理排版细节，首行缩进得靠 CSS。几乎所有现代浏览器都支持 text-indent，它专为段落首行设计，不会影响其他行或块级结构。
常见写法是：
p { text-indent: 2em; }
其中 2em 表示缩进两个当前字体大小的宽度，比固定像素更适配响应式场景。
注意：该属性只对块级元素（如 p、div）生效；如果段落被设成 display: inline 或套在 span 里，text-indent 会失效。
为什么不用 或空格硬编码
手动在每段开头加 看似简单，但实际维护成本极高——换字体、改字号、做响应式时缩进会错位；复制内容时容易带入多余空格；SEO 和屏幕阅读器也可能误读。
更麻烦的是，中文排版中一个汉字宽度 ≈ 1em，但不同字体下 的实际占位并不稳定，尤其在移动端 WebView 或旧版 Safari 中常出现缩进过宽或不生效的情况。
所以：
- 别用
- 别用多个普通空格（HTML 会合并为一个）
- 别用
padding-left代替（它会让整段左移，破坏对齐）
text-indent 的兼容性和边界情况
text-indent 在 IE8+、所有主流移动浏览器中表现一致，但有几点必须留意：
- 负值允许，比如
text-indent: -1em可实现悬挂缩进，但需配合padding-left防止文字溢出容器 - 如果段落内含
float元素（如图片），缩进可能被浮动元素干扰，建议优先用flex或grid布局替代浮动 - 使用
rem单位时，确保根字体大小未被重置（比如某些 UI 框架会设html { font-size: 62.5%; }）
博客系统里怎么快速应用
如果你用的是静态博客（如 Hexo、Hugo）或 CMS（如 WordPress），通常只需修改主题的主 CSS 文件（如 style.css 或 main.scss），加一行：
article p:not(.no-indent) { text-indent: 2em; margin-top: 0; }
这样能避开标题、引用块、代码段等不需要缩进的 p；margin-top: 0 是为了防止段落间距叠加——中文排版里段间距和缩进同时存在反而显得松散。
如果某些段落真不需要缩进（比如摘要、图注），加个 class="no-indent" 就行，比逐个删 快得多。
真正难的不是加缩进，而是统一处理「列表项里的段落」「表格单元格中的文字」「blockquote 里的引文」——这些地方往往要单独写选择器，否则缩进会乱套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
