Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Adjust The Spacing Around Ordered And Unordered Lists In Divi

Nelson Miller Profile Orange
In this tutorial I will show you how to adjust the spacing around ordered number and unordered bullet lists in Divi text.

▶️ Please watch the video above to get all the exciting details! 👆

Add CSS To Adjust The Spacing Above And Below Lists In Divi

As usual when I first decided to solve this little, I tried to think of the best way to approach it.

A Possible Solution – Inline CSS…

I have been known on occasion to add style tag inside a heading or paragraph tag using inline CSS. For example, if I faced this only at one specific location, I may add style=”margin-bottom: 20px;” or something like that to a <h2> or <p> tag above a list.

<p style="margin-bottom: 20px;">
  This is a paragraph above a list.

…But Only For One-Time Cases

That can work well, but the downside to using an inline tag is that it will only apply to one spot and can make changing it in the future either by yourself or someone else more difficult. It’s always best to add CSS in your Theme Options or in a child theme style.css file because then you can change it from one location, and it will update everywhere that it is used.

Another Possible Global Solution…

The next things I tried was adding margin to the top or bottom of the list like this:

/*add spacing to the top of a list*/
.et_pb_post_content .et_pb_text ol,
.et_pb_post_content .et_pb_text ul {
  margin-top: 20px;

Notice that I am targeting only the text in a Theme Builder template. This is a nice trick if you only want this code to apply to ordered or unordered lists on your single blog posts.

…But With Problems

But this also comes with some issues that I didn’t realize at first. There are some situations where you may not want the margin to apply, like if there is a paragraph before or after the list or not. If you add margin to the bottom of the list, it works great if there is another paragraph after it. But if there is not, then it looks like extra space. Or maybe the list is at the top of  textarea, and so you don’t want to add extra space there – you only want to add it if there is a paragraph above it.

The Best Solution

Then I remembered something called sibling selectors. These are used in CSS to select elements under specific conditions. In our case, we only want to target a list if there is a paragraph above it, or we only want to target a list if there is a paragraph below it.

Sibling selectors work by using two selectors, but the value only applies to the second element if it immediately follows the first element. Both elements need to be children of the same parent, which is true with text in a textarea in Divi. The examples below will help to explain it, and be sure to watch the video embedded above to see this all in action!

As you may see, this still had some quirks that needed to be solved. It requires a separate snippet for lists that have a paragraph after them than for those that do not. Otherwise, these snippets are pretty straightforward.

Please remember to adjust the values. You can also use negative values as needed.

Adjust Space Above A List That Follows A Paragraph

/*adjust the spacing above the list by targeting the <ul> element that immediately follows the <p> element*/
  p+ul {
	margin-top: 20px;

Adjust Space Above A Paragraph That Follows A List

/*adjust the spacing above the paragraph after a list by targetting the <p> element that immediately follows the <ul> element*/
ul+p {
	margin-top: 30px;

I hope you found this little code exploration helpful! If so, let e know in the comments. And be sure to let me know if you found an even better solution, or an alternative one. There are often more ways to do something than one, and it’s fun to try to find the most efficient method.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


Comments By Others

  1. James King

    Hi Nelson!

    Thanks for the great Divi tutorials. They have always been a great resource particularly as solutions for some of the peskiest emergent problems. Kindly do a future post on styling ordered lists, and nested lists in the text module. As always, many thanks!!

  2. Brian Pearl

    Hey there! I’ve been tasked with fixing this problem on a client’s website. I tried putting the sibling code into the custom css of the site and it’s not changing anything. If I paste the code into the custom css for the text module I can get the space underneath the ul to change, but he space above the ul doesnt’ change. The page I’m trying to get it to work on is

    • Hemant Gaba

      Hi Brian!

      Please add the following code and see if it helps:

      .et_pb_text ol,
      .et_pb_text ul {
      margin-top: 20px;
      margin-bottom: 20px;

      You can use the custom class in place of .et_pb_text as well.

  3. Pritam

    Great tutorial! Your detailed explanation of using sibling selectors to adjust spacing around lists in Divi is truly helpful. I’ve faced similar spacing issues before, and your approach seems like a smart solution. Thanks for sharing this coding insight and the clear examples. Looking forward to trying it out on my own projects. Keep up the fantastic work.

  4. peter carden

    Ty TY. I had this a while ago when I put some icons in.(using your code)mucked anout for a while trying to get it right, then just left it. Sure no one cared but I cringed every time I looked at it.

    • Hemant Gaba

      Hi Peter!

      Sorry, the issue is not clear. Can you please share the page URL with me?


Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts


Your Cart