最近在维护博客时，发现侧边栏的“Most Viewed Posts”（热门文章）列表项之间间距过小，文字挤在一起，不仅影响美观，也让读者难以快速浏览。经过一番折腾，终于通过自定义 CSS 完美解决了这个问题。本文将完整记录操作步骤，并附上可直接使用的代码，希望能帮助到遇到同样困扰的朋友。
问题现状：默认间距过于紧凑
从下图可以看到，列表项上下紧挨着，视觉上缺乏呼吸感，尤其当标题较长换行时，更显得拥挤：
⚠️ 误区提醒：区块自带的“额外 CSS”是个“陷阱”
很多朋友（包括我）第一时间会想到在区块编辑器的“高级”设置中找到“额外 CSS”输入框（见下图），然后信心满满地把完整的选择器代码粘贴进去，结果发现毫无变化。
仔细看这个输入框下方其实有一行灰色小字说明：
“Add your own CSS to customize the appearance of the Most Viewed Posts block. You do not need to include a CSS selector, just add the property and value, e.g. color: red;.”
翻译过来就是：你不需要写选择器，只需要写属性和值，例如 color: red;。
这意味着：
- 这个输入框只接受单纯的 CSS 声明（如
margin-bottom: 20px;）， - 样式会施加到该区块的最外层容器（
<div>）上， - 根本无法深入到内部的
<li>元素去调整列表项间距。
而当初我压根没注意到这行提示，反复粘贴完整的 .wp-block-post-views-counter-most-viewed-posts ol li { ... }，死活不见效果，白白浪费了大量时间排查缓存和主题冲突。直到偶然看到那行说明，才恍然大悟——原来“路”走错了。
所以，区块自带的“额外 CSS”并不适合我们的需求，必须换一种方法。
✅ 正确方案：利用站点编辑器（FSE）的全局“额外 CSS”
如果您使用的是 WordPress 块主题（即全站编辑主题），请通过以下路径添加自定义 CSS：
操作步骤
- 进入 WordPress 后台，点击左侧菜单 外观 → 编辑（或“编辑器”），打开站点编辑器（Site Editor）。
（如果您的主题没有“编辑”选项，说明不是块主题，仍可使用“外观 → 自定义”中的额外 CSS，但本文针对块主题环境。） - 在站点编辑器顶部，点击 “样式” 图标（通常是一个圆形调色板或铅笔图标），右侧会弹出样式面板。
- 在样式面板中，向下滚动找到 “额外CSS” 部分（如下图）。
- 将我们准备好的 CSS 代码完整粘贴到文本框中，然后点击 “保存” 并发布。
- 清空站点缓存（插件缓存、CDN 等）并刷新前台页面，即可看到效果。
📝 CSS 代码详解
我采用了带有清晰注释的代码，方便日后调整。核心逻辑是：
- 给每个列表项增加底部外边距（
margin-bottom），拉开垂直间距； - 添加浅色分割线（
border-bottom），让条目层次更分明； - 最后一项去除多余边距和分割线，保持整洁；
- 微调计数数字的样式，使其更和谐。
/* ==========================================================================
🔥 热门文章列表间距优化
解决：增加列表项之间的垂直间距，添加分割线提升可读性，优化计数样式。
========================================================================== */
/* 热门文章列表项间距优化（适用于整个网站） */
.wp-block-post-views-counter-most-viewed-posts ol li {
margin-bottom: 20px; /* 列表项之间的垂直间距，可按需加大（如 24px） */
padding-bottom: 6px; /* 内部下内边距，增加呼吸感（可选） */
border-bottom: 1px solid #e5e5e5; /* 浅色分割线，让层次更清晰（可选） */
}
/* 最后一项去掉底部边距和分割线，保持整洁 */
.wp-block-post-views-counter-most-viewed-posts ol li:last-child {
margin-bottom: 0;
border-bottom: none;
}
/* 让计数数字与标题更和谐（可选） */
.wp-block-post-views-counter-most-viewed-posts ol li .count {
margin-left: 8px;
font-size: 0.85em;
color: #999;
}🎯 最终效果：间距舒适，层次清晰
应用上述样式后，热门文章列表变得疏密有致，每条内容之间有了明显的间隔，分割线进一步引导视线，整体浏览体验大幅提升：
对比调整前后的截图（图1与图5），效果立竿见影。如果你觉得 20px 间距还不够大，只需修改 margin-bottom 的数值，例如改为 28px 或 32px 即可。
💡 注意事项
- 若主题自带样式优先级较高，可在属性值后添加
!important强制覆盖（如margin-bottom: 20px !important;）。 - 务必清除站点缓存（插件缓存、CDN 缓存等）并刷新浏览器，避免看不到更新。
- 该选择器仅针对
wp-block-post-views-counter-most-viewed-posts这一特定区块，不会影响其他列表，放心使用。 - 如果您的主题不是块主题（没有“编辑”菜单），请改用“外观 → 自定义”中的额外 CSS，同样有效。
希望这篇博客能帮到你。如果在操作中遇到任何问题，欢迎留言交流！
技术博客运营与商业化咨询服务
本站已持续运营超过 10 年，累计发布 1000+ 篇原创技术文章，长期实践 WordPress 网站建设、性能优化、多语言运营、Google SEO 以及广告变现等方向。所有经验均来自真实网站运营过程中的持续实践与验证。如果你正在运营个人博客、技术网站或独立开发者项目，希望获得更多自然流量并探索网站商业化路径，欢迎联系我交流。
适合以下用户：
✅ 技术博客运营者
✅ 独立开发者与个人站长
✅ SaaS 产品官网运营团队
✅ 希望拓展海外流量的网站运营者
✅ 希望通过网站获得收入的内容创作者
服务内容：
✅ WordPress 性能优化
✅ SEO 优化咨询
✅ 多语言网站建设
✅ 广告收益优化
✅ 博客运营与商业化咨询
如需了解方案或交流相关问题，请直接联系我，并注明：博客运营咨询。
联系方式：
Telegram：@shuijingwan
微信：13980074657
邮箱：shuijingwanwq@gmail.com
发表回复