CSS 实现正文段落首行缩进的最佳实践

Administrator

代码间的呼吸感：关于正文段落首行缩进的一次美学修正

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

在搭建这个自托管的数字书房时，我始终觉得，文字的呈现方式本身就是内容的一部分。最近在微调博客样式时，我花了不少时间去雕琢一个看似微不足道，实则关乎阅读气质的细节——中文正文的首行缩进。

起初，我的做法很粗暴，仅仅是给所有的 <p>标签加上了 text-indent: 4em;的声明。在纯粹的视觉层面，这确实奏效了：文章段落整齐地向右挪了四格，透出一种传统印刷品般的秩序感。然而，这种「一刀切」的快感很快就被打破了。当我滚动到列表或引用区块时，问题暴露了出来——那些本该紧凑排列的列表项，因为外层包裹着 <li><p>的结构，竟然也跟着缩进了进去。这种错位在视觉上显得极不协调，原本灵动的排版瞬间变得有些「神经质」。

这让我意识到，真正的「优雅」，不在于强制统一，而在于懂得克制。

于是，我开始重新审视 CSS 选择器的边界。问题的本质其实很简单：Halo 主题（以及大多数现代 CMS）为了语义化和样式可控，常常会将列表项内的文本包裹在一个额外的 <p>标签中。如果我们直接攻击 p，就必然会误伤无辜。解决之道，在于划定清晰的「势力范围」。

我放弃了全局的 p选择器，转而将目标锁定为 .post-content > p。这意味着我只关心那些直接挂载在文章内容容器下的段落，而不去干涉嵌套在其他元素内部的文本。紧接着，我用了一组「豁免条款」来修复那些被误伤的区域：

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

这几行代码就像是交通协管员，把跑错道的列表段落拉回了原位。至此，排版终于恢复了它应有的逻辑：列表归列表，引用归引用，而正文段落则保持着它端庄的缩进。

在这个过程中，我还确立了几条不成文的「排版洁癖」准则：

首先是单位的抉择。我坚持使用 em而非 px。在响应式设计大行其道的今天，固定的像素值就像刻舟求剑，无法适应不同屏幕尺寸下的字号变化。而 em是相对单位，它会随着父级字号的变化而自动伸缩，确保在手机端和桌面端，缩进的比例始终是和谐的。

其次是移动端的微调。在手机屏幕上，过宽的缩进反而会挤压宝贵的阅读空间。因此，我引入了一条媒体查询规则：当屏幕宽度小于 480px 时，将缩进从 4 格缩减为 2 格。这是一种对阅读场景的尊重，也是技术服务于人的体现。

最终，这一切都收敛成了一段干净、纯粹且不依赖 JavaScript 的 CSS 代码。它没有破坏原有的 HTML 结构，也没有引入复杂的脚本逻辑，仅仅是站在 CSS 的肩膀上，完成了一次对视觉秩序的温柔校正。

这种「只动样式，不动结构」的思路，不仅适用于 Halo，我想对于 Typecho、WordPress 乃至静态博客生成器来说，都是通用的。毕竟，好的排版不该是代码的堆砌，而是一种在方寸之间寻找呼吸感的平衡艺术。

评论