Sometimes we find issues with some themes in WordPress that we use. One example is when writing content (pages/posts) using Gutenberg where there is a List block, the space between the List blocks, both above and below, will look pleasing/ideal in Gutenberg editor (backend). Still, when you preview or publish it, the space after the List block is narrower. Of course, this will reduce the comfort of your website users in reading your content.
This article will show you how to add space after the List block in Gutenberg.


How to Add Space After the List Block in Gutenberg
Well, adding space after the List block in Gutenberg is very easy. The only thing that you need to do is add the simple CSS snippet to the Additional CSS block on Theme Customizer.
There are two ways to access the Additional CSS.
- From WordPress dashboard, go to Appearance -> Customize -> Additional CSS
- When previewing your content (page/post), go to menu bar and click Customize -> Additional CSS
Once you enter the Additional CSS block, please copy the simple CSS snippet below and paste it into the available field.
ul{ margin-bottom:14px; } ol{ margin-bottom:14px; }

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
Note: The CSS snippet we give you above selects two elements, Unordered List (ul
) and Ordered List (ol
). We set 14px
of margin-bottom
for each element. You can customize the space after the List block by editing the values on the CSS snippet.
That’s it. To see how the CSS snippet you’ve added works, you can open your content (pages/ posts) where the List block is in a new window.

The Bottom Line
As we mentioned at the beginning of this article, we need to be concerned about the comfort of users when they’re reading our content. Adding a space after the List block is one of the manifestation attention details to make a great impression on users when consuming the contents of your website.