Achieving a polished and cohesive design often requires precise control over the spacing between elements on your website.
In this article, we will guide you through the process of reducing spacing between elements in Divi.
Whether you're looking to tighten up the layout, remove excess padding or margins, or make your content appear more compact, our step-by-step instructions will help you adjust the spacing to your exact preferences.
Definitions:
Padding - creates extra space within an element
Margin - creates extra space around an element
By default, Divi elements, such as Regular Sections and Rows, have top and bottom padding values set, which can be adjusted using the Visual Builder by dragging & dropping the padding:
The drag-and-drop spacing adjustment works on other elements, such as modules.
If you like to have more precise control over the spacing, follow these steps:
Open the Element's Settings (section, row, column, or module)
Go to Design Tab → Spacing
Use the Margin option to add space around the element
Use the Padding option to add space inside the element
