When writing and formatting blog posts on your WordPress site, it’s important to make sure that the text isn’t too dense. Dense text makes it harder for your reader to absorb your content.
On the web, shorter sentences and more white space is needed to allow for your reader to skim through with ease.
Sometimes you may want to use an unordered (bulleted) or ordered (numbered)list to convey your point. Your lists may contain a concept that makes it necessary to have more than one sentence and even a small paragraph.
In WordPress, it’s easy to create an unordered or ordered list by simply hitting the button in the menu. Your lines are automatically indented.
The problem is that, in many WordPress themes, there is no space between each listed item causing your text to be dense and hard to digest.
The problem…
- You could try to simply hit [Enter], but that adds another bullet point in the blank space. You hit [Backspace] and the line that you want disappears along with the bullet point. You hit [Delete] and the lines move up. Ahhh!!!
- You could try hitting [Shift+Enter] and that looks great in editing mode. Then when you preview, the space is gone. Frustrating!
- A workaround is to [Shift+Enter], type a period (.) to be a place holder, then highlight the period and change the color to your theme’s background. The drawback is that when you change your theme and possibly your background color, you’ll see some random periods throughout your blog posts. Not the best practice and long-term solution.
The solution…
The easiest and most practical way to add space between either an unordered (bulleted) list or an ordered (numbered) list is to use a tiny piece of HTML code.
Here’s how:
- When editing your blog post, in Visual Mode, select your ordered or unordered list block.
- Click on the three dots to reveal more settings. Then select Edit as HTML.
- Don’t be intimidated by all the words and small bits code that run together.
- Simply search for <li> and replace it with <li style=”padding-bottom: 18px;”>
- When you go back to Edit visually mode, don’t be disappointed that you don’t see any space between your list items.
- Save your draft and then Preview. You should see the space added in your final blog post.
Note: You can change the size of the spacing between the list items by changing the number of pixels. Our preference happens to be 18px.
Quick Reference
Search:
<li>Replace with:
<li style=”padding-bottom: 18px;”>