首行缩进，让文字更有呼吸感

在网页排版里，细到一个空格、一行的起始位置，都会影响阅读体验。text-indent 不是炫技的工具，而是让段落读起来更自然、更舒适的手段。用对它，能减少读者的回读、提升内容的可读性与专业度。

为什么需要首行缩进

想象你在手机上读一篇长文，如果不给第一行留出一点“呼吸空间”，视线会立刻被拉回开头，反复试探哪个空格是真正的起始。首行缩进能建立清晰的段落边界，让阅读像翻书一样顺畅。

如何设置与调整

在 CSS 中，text-indent 以长度或百分比指定缩进的像素数或比例，也可以配合 letter-spacing 或 word-spacing 一起微调，但切记缩进幅度不宜过大，2em 以内通常最舒适。

.block {
  text-indent: 1.25em;
  font-size: 16px;
}

在 HTML 中，把它直接写在对应的段落、div 或其他块级元素上即可生效：

<div class="block">
  这是首行缩进的段落，缩进了 1.25em。
</div>

实战：从“无缩进”到“自然阅读”

刚写完一篇文章，通读却感觉节奏不稳，别急，先检查段落起始。你可以：

• 给正文块统一设置 1em～1.5em 的首行缩进，段落间不加额外缩进，保持干净。
• 为标题或强调段落做反向处理，用更小的负缩进制造视觉停顿，增强节奏。
• 结合 line-height，让行间距与缩进形成视觉平衡，比如 line-height: 1.6em 与 text-indent: 1.25em 相得益彰。
• 避免在列表、表格等结构中使用，这些元素默认有列表或表格缩进，容易造成双重缩进。

适配与兼容

大多数现代浏览器都对 text-indent 支持良好，兼容性问题基本不存在。但如果你在项目里需要兼容旧环境，可以用 JS 动态检测或使用前缀与回退方案，以渐变方式过渡。

与排版工具的协同

如果你用排版工具或设计软件做原型，记得把缩进的数值对齐到你的 CSS 规则。设计稿里常见的 0.5cm 或 0.75cm，换算成 em 或 rem 写入代码时，要考虑到字体大小带来的等比缩放。

细节与注意事项

• 避免只对单个段落进行大缩进，这会让结构显得松散。
• 不要在不需要缩进的块级元素上设置，防止造成不必要的视觉层级。
• 避免与 padding 结合过度，缩进主要影响文字起始位置，与内边距的视觉效果不同。

结尾

首行缩进的设置像是一篇文章的呼吸点，细调却能改变整体的节奏与气质。用它让内容更易读、更舒服，是在信息海洋里给读者的一点温柔。