Optimize the list spacing of popular articles in WordPress to improve your reading experience

From Classical to Block: Theme Migration

(1) From Hueman to Twenty Twenty-Five, Topic Switching with Multilingual Menu Configuration

(2) In a WordPress 2025 topic, move the Polylang language switch to the full record in the upper right corner

(3) WordPress Twenty Twenty-Five Global Width Layout Practical Notes: Widescreen Full-Scale + Large Screen Limited Wide Configuration Scheme

(4) Practice｜WordPress Twenty-Five Block Theme Text Blog Home Transform the Classic Two-Column Homepage

(5) WordPress Twenty Twenty-Five Two-column homepage transformation: Text Blog Small picture list template complete practical record

(6) Debugging record of the beautification and rendering mechanism of the drop-down menu of the category list

(7) Fixed the issue of “getting dissatisfaction” in the sidebar: WordPress 2025 theme calendar style optimization

(8) Add the multi-language “Personal Brand” block to the sidebar of the blog homepage

(9) Troubleshooting and Repair of One FSE Page Loss: From Pure Layout Template to Query Loop

(10) WordPress 2025 Theme + Polylang: Fix a full record of the missing language directory for the calendar link

(11) Optimize WordPress 2025 Themeser: A complete remodeling record of multilingual navigation, social links and archive drop-down bars

(12) From single column to two columns: the practical record of the sidebar and list structure of the WordPress category page unified first page

(13) Say goodbye to uneven! Create a modern label cloud for 2025 themes only with CSS

(14) Is the search result page too long? I did a “break away” for the WordPress 2025 theme

(15) Compatibility restoration practice of WordPress calendar in Polylang multi-language environment

(16) WordPress Theme Migration: Does Emoji Process Code Need to Keep?

(17) WordPress Tab NoIndex Optimization: Practical Sharing from Theme Migration to Code Refactoring

(18) WordPress Console Error Troubleshooting Transcript: From jQuery conflict to Baidu statistical warning

(19) From AD INSERTER to WPCode: CTA configuration migration and priority implementation

(20) Remember a full record of a wordpress 500 fatal error checking caused by wpcode shortcode

(21) Remember a WordPress 2025 Theme Logo and Favicon’s Tossing Journey

(22) From AD Inserter to WPCode: CTA configuration migration and optimization practices

(23) WPCode code snippet insertion order problem: the gap between theory and practice

(24) Optimize the list spacing of popular articles in WordPress to improve your reading experience

Recently, when I was maintaining a blog, I found that the distance between the ‘Most Viewed Posts’ (popular articles) list items in the sidebar is too small, and the text is crowded together, which not only affects the appearance, but also makes it difficult for readers to browse quickly. After some tossing, I finally solved this problem perfectly through custom CSS. This article will complete the operation steps and attach code that can be used directly, hoping to help friends who encounter the same troubles.

Problem status: The default spacing is too compact

As you can see from the figure below, the list items are next to each other, and there is a visual lack of breathing, especially when the title is long and the line is crowded:

⚠️ Reminder of misunderstanding: The ‘extra CSS’ that comes with the block is a ‘trap’

Many friends (including me) will think of the ‘extra CSS’ input box in the ‘Advanced’ setting of the block editor for the first time (see the picture below), and then paste the complete selector code in full of confidence, and it turns out thatUnchanged.

Look carefully at this input boxBelowIn fact, there is a line of gray words:

‘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;

The translation is:You don’t need to write selectors, just write properties and values, for example color: red;.

This means:

• This input box only acceptsSimple CSS Statement(such as margin-bottom: 20px;),
• The style will be applied to the block’soutermost container((<div>) on,
• Can’t go deep inside <li> ElementTo adjust the spacing of list items.

And when I didn’t notice this line at all, I pasted the whole line repeatedly. .wp-block-post-views-counter-most-viewed-posts ol li { ... }, there is no effect, and a lot of time is wasted to check the cache and theme conflicts. It was not until I accidentally saw the line of instructions that I suddenly realized that the ‘road’ was wrong.

so,The ‘extra CSS’ that comes with the block is not suitable for our needs, it must be a different method.

✅ Correct Scheme: Take advantage of the global ‘extra CSS’ of the Site Editor (FSE)

If you are using a WordPress block theme (i.e., a full site editing theme), add a custom CSS via the following path:

operating steps

1. Enter the WordPress background and click the menu on the left Appearance → Edit(or ‘Editor’), openSite Editor(site editor).
   (If your theme doesn’t have an ‘Edit’ option, the instructions are not block themes, you can still use the extra CSS in ‘Appearance → Customization’, but this article is for block theme environments.)
2. At the top of the site editor, click ‘Style’ The icon (usually a circular palette or pencil icon) will pop up the style panel on the right.
3. In the Styles panel, scroll down to find ‘Extra CSS’ part (as shown below).
4. Paste the CSS code we prepared completely into the text box, then click ‘Save’ and released.
5. Clear the site cache (plug-in cache, CDN, etc.) and refresh the foreground page to see the effect.

📝 Detailed CSS code

I have used code with clear comments for future adjustments. The core logic is:

• Increase the bottom margin for each list item (margin-bottom) to open the vertical spacing;
• Add light dividing lines (border-bottom) to make the entries more clear;
• The last one removes excess margins and dividing lines to keep it clean;
• Fine-tune the style of counting numbers to make it more harmonious.

/* ==========================================================================
   🔥 热门文章列表间距优化
   解决：增加列表项之间的垂直间距，添加分割线提升可读性，优化计数样式。
   ========================================================================== */

/* 热门文章列表项间距优化（适用于整个网站） */
.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;
}

/* ==========================================================================
   🔥 热门文章列表间距优化
   解决：增加列表项之间的垂直间距，添加分割线提升可读性，优化计数样式。
   ========================================================================== */

/* 热门文章列表项间距优化（适用于整个网站） */
.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;
}

🎯 Final effect: comfortable spacing, clear layers

After applying the above style, the list of popular articles has become dense, and there is a clear interval between each content. The dividing line further guides the sight, and the overall browsing experience has been greatly improved:

Comparing the screenshots before and after adjustment (Figure 1 and Figure 5), the effect is immediate. If you think the 20px spacing is not large enough, just modify margin-bottom value, for example, to 28px Or 32px can.

💡 Notes

• If the theme’s own style has a higher priority, you can add it after the attribute value !important mandatory coverage (such as margin-bottom: 20px !important;).
• Be sure to clear the site cache (plug-in cache, CDN cache, etc.) and refresh the browser to avoid invisible updates.
• This selector is only for wp-block-post-views-counter-most-viewed-posts This specific block will not affect other lists, so use it with confidence.
• If your theme is not a block theme (without the ‘Edit’ menu), use the extra CSS in ‘Appearance → Customization’ as well.

Hope this blog can help you. If you encounter any problems in the operation, please leave a message to exchange!