If you blog, you probably use bulleted or numbered lists at least occasionally. I use them a lot. 

In WordPress, creating a list is as simple as hitting the desired list icon in the formatting toolbar. Most of the time, that’s probably all you need to do. But, sometimes, the default spacing in WordPress lists can appear a little cramped.

Especially for lists that contain a lot of text in each item. So, on occasion, you might want to add space between list items in your posts.

Trying to add a line between list items by hitting the “Enter” key generally won’t work. Adding <br><br> in the Text Editor usually won’t work either. (This could depend on which WordPress theme you are using).

So, what to do? There are a couple of approaches.

Create Space Between List Items By Adding Custom CSS in the CSS Stylesheet Editor

From your WordPress Dashboard, go to “Appearance” and then “Edit CSS”. In Edit CSS, add the following code and then save the stylesheet.

.space_list li {
padding-top: 10px;
}

Note: I’ve called it “space_list”, but you can call it anything you like. Pick a name that you can remember easily. Adjust the “padding-top” number to whatever amount of space you think is required.

Now, if you decide that you want to add space between list items in your posts, click “Text” to open the Text editor and add the following code to replace the existing <ul> or <ol>for the list you want to change.

<ul class="space_list">

<ol class="space_list">

Create Space Between List Items by Adding Inline CSS In the Post

You can also add space between list items directly within your posts. If you create a list, then decide that some or all of the items need a bit of extra space, here’s what to do. Click “Text” to open the Text editor and add the following code to replace each <li> in the list that you want to change.

<li style="margin-bottom: 10px;">

The inline CSS approach gives you more fine-grained control because you can add the extra space to some list items but not others if you wish. Again, you can adjust the size of the space via the number in the code.

Keep in mind that there are several other ways of achieving the same result. But, I’ve found that these two approaches are both flexible and easy to do.

By the way, if you are not familiar with Cascading Styles Sheets (CSS), it might be a good idea to get up to speed with the basics before you start fiddling around in the Stylesheet Editor. You can find a good CSS beginner tutorial here.  For a more comprehensive treatment of the topic, try this one.