Blog Post FeaturHow To Adjust The Spacing Around Ordered And Unordered Lists In Divi Tutorial By Pee Aye Creative

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

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

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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.
</p>

…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.

Last updated Jul 18, 2023 @ 12:49 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

  1. 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.

    Reply
    • Hemant Gaba

      Hi Peter!

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

      Reply
  2. 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.

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart