All Collections
Divi Documentation
FAQ's
How to adjust the spacing around Ordered and Unordered lists in Divi
How to adjust the spacing around Ordered and Unordered lists in Divi

This tutorial will help you adjust the spacing around Ordered and Unordered lists in Divi

Rijendra avatar
Written by Rijendra
Updated over a week ago

This tutorial with help you adjust the spacing above and below the Ordered (ol li) and Unordered (ul li) lists used inside the content body of a module using CSS.

How to adjust the spacings on a specific module.

  1. Define a CSS Class to the Text module
    ​

    You can go to the Module settings > Advanced > CSS Class, define a unique class name: divi_list_spacing
    ​

  2. First, we will remove the default spacing above the Ordered List and Unordered lists by adding this CSS in Theme Options > Custom CSS:

    .divi_list_spacing *:has(+ ol), .divi_list_spacing *:has(+ ul) {
    padding-bottom: 0;
    }


    As a result, the spacing above the Ordered list and Unordered list will be zero.
    ​

  3. Now add this CSS code just below the previous CSS code in Theme Options > Custom CSS:
    ​

    .divi_list_spacing ol:first-child, .divi_list_spacing ul:first-child {
    padding-bottom: 10px;
    }
    .divi_list_spacing * + ol, .divi_list_spacing * + ul {
    padding-top: 10px;
    padding-bottom: 10px;
    }


    This part is where you can adjust the spacing for above and below the Ordered and Unordered list as you want. Modify the padding-top: 10px and padding-bottom: 10px which suits best for you.

How to adjust Ordered and Unordered listing spacings for all Text modules

If you want to apply the above CSS for all Text modules, you can skip the custom CSS Class name part and use this CSS in WordPress Dashboard > Divi > Theme Options > Custom CSS:

.et_pb_text_inner *:has(+ ol), .et_pb_text_inner *:has(+ ul) {
padding-bottom: 0;
}
.et_pb_text_inner ol:first-child, .et_pb_text_inner ul:first-child {
padding-bottom: 10px;
}
.et_pb_text_inner * + ol, .et_pb_text_inner * + ul {
padding-top: 10px;
padding-bottom: 10px;
}


The above code will apply to all text modules at once.

Did this answer your question?