CSS 实现正文首行缩进：一次排版美学的实践

更新：由于显示 Bug 较多，目前本站已放弃正文段落首行缩进。

搭建博客时，我一直觉得文字的呈现方式也是内容的一部分。最近微调样式，花了一些时间处理一个看似微小、却影响阅读气质的细节——中文正文的首行缩进。

起初做法简单粗暴：给所有 <p> 标签加 text-indent: 4em;。视觉上，段落整齐右移四格，有了传统印刷品的秩序感。但问题很快出现：滚动到列表或引用块时，因为结构常是 <li><p>，里面的段落也被缩进，显得错位且不协调。

这让我明白，不能一刀切，得分清边界。

Halo 主题（及多数现代 CMS）为了语义化，常把列表项文本包在额外 <p> 中。直接选 p 会误伤。解决方法是划定范围。

我放弃全局 p，改用排除选择器锁定正文段落：

p:not(li p):not(blockquote p) {
    text-indent: 2em;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

这样只缩进直接属于内容的段落，列表和引用内的不被影响，排版恢复逻辑。

过程中还定了几点准则：

一是用 em 而非 px。响应式设计中，固定像素不能随字号变化，em 相对单位能自动伸缩，保证手机和桌面缩进比例和谐。

二是移动端微调。小屏上过宽缩进会挤压阅读空间，因此加媒体查询：屏幕小于 480px 时，缩进从 2em 减为 1em，这是对场景的适应。

最终，只用了一段不依赖 JavaScript 的 CSS，未改动 HTML 结构，完成了视觉秩序校正。

这种“只动样式，不动结构”的思路，不仅适用于 Halo，对 Typecho、WordPress 及静态博客生成器也通用。好的排版不是代码堆砌，而是在方寸间找到平衡。