How to Add Space after the List Block in Gutenberg

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.

Appearance in the WordPress Gutenberg editor
Appearance in preview or publish

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.

  1. From WordPress dashboard, go to Appearance -> Customize -> Additional CSS
  2. 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.



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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment