Reducing Divi Builder Module Spacing

Written by Dan Mossop

This post covers some of the ways you can increase, reduce or eliminate the space around Divi Builder modules, rows and sections to get the right amount of white space for your design.

Adjusting the Vertical Gap Between Divi Builder Modules

If you have modules stacked vertically in a column and would like to adjust the gap between them, there are several options.

To apply the same gap between each of the modules you can use the "Gutter" options in the row settings. To do this, go into the row settings, set "Use Custom Gutter Width" to "Yes". This will bring up the "Gutter Width" option. It lets you select a value between 1 and 4, which produces the following gap between each module (as a % of the column width):

  • 1 – 0%
  • 2 – 1.5%
  • 3 – 2.75% (default)
  • 4 – 4%

Unfortunately, this doesn't provide much flexibility, so if you need different gaps between modules or different gaps to these, it won't help you.

In these cases, you need to adjust the margin settings on the modules themselves. The modules typically have no top margin and a bottom margin of 2.75%. Some modules include a "Custom Margin" option in their settings which can be used to adjust this.

For those modules that don't have a custom margin option, you can add the following into the "Main Element" box in the Advanced / Custom CSS tab of the module settings (replacing the values here with your choice of margin amount):

margin-bottom: 5% !important; margin-top: 5% !important;

Reduce the Spacing Between Divi Pagebuilder Sections

The main pagebuilder building block is the section. You can adjust the spacing between your sections with the following CSS:

:not(.et_pb_fullwidth_section).et_pb_section { 
   padding-top: 50px !important; 
   padding-bottom: 50px !important;
}
The default spacing above and below is 50 pixels, so you probably want to reduce that until you find a spacing you're happy with. Note that fullwidth sections have no spacing by default, so the above code leaves them alone.

Reduce the Spacing Between Divi Pagebuilder Rows

Sections are then divided into a number of rows, which are another source of vertical spacing between modules. You can control this spacing with the following:

.et_pb_row { padding-top: 30px !important; }
Again, the value above is the default and you probably want to reduce it from 30px.

Transform Your WordPress Site with AI-Driven CTAs

Enhance your posts by using WP Magic CTAs to effortlessly increase engagement on your site. This AI-powered plugin creates smart, targeted call-to-actions for each post, allowing you to seamlessly direct attention to your offers and boost conversions. Perfect for bloggers focused on optimizing content layout, such as improving vertical spacing or reducing module gaps.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

41 Comments

  1. Hi Dan, you mentioned the following code for reducing the gap under the Sections:

    :not(.et_pb_fullwidth_section).et_pb_section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    }

    Can I paste that same code to the Custom CSS code in the Theme Customizer so that it applies to all sections throughout my site, or does that code have to pasted to each individual Section? Do you know the code I can use to apply the same change to all Sections across my entire site? Thanks!

    Reply
    • Hey Stacy, yes that should work :) Give me a shout if it doesn't.

      Reply
  2. I'm getting a blank space after my video slider and not sure where it's coming from

    Reply
    • Hi Laura, are you still having problems with this? I took at the page linked in your comment, but it looks like it might be sorted out now (by removing the video slider, right)? If not, can you confirm the page / section you're having the issue with? Thanks!

      Reply
  3. I have too much space above and below the image gallery. Tried placing your code before & after the gallery, after the first row of text, and before the second row of text, but no change from any of those placements. Thanks for your advice!

    Reply
    • Hi Laurie, in your case the extra space is coming from padding on the sections. Specifically, the space above the gallery is a combination of the bottom padding on section before the gallery and the top padding on the section containing the gallery. And the space below the gallery is a combination of the bottom padding on the section containing the gallery and the top padding on the section which follows it. You should be able to remove / reduce this by going into the section settings for each of these sections and adjusting the padding at "Design > Spacing > Padding". In each case the top / bottom padding is currently 54px – if you set it to something smaller, that should reduce the gap between the gallery and its surrounds. I hope that helps, but let me know not. Thanks!

      Reply
  4. how to remove space between textbox and button in contact form ??

    Reply
  5. Thanks for this info! I'm trying to stack buttons tightly in the header like on this design: https://www.oasisturf.com/ But I'm ending up with padding between my button modules that I can't get rid of. I tried your tips in this article. Any suggestions?

    Thanks!

    Reply
    • Hey Dawn, the following CSS is being applied to the first button (the "Get a Free Estimate" one):

      .et_pb_button_0.et_pb_module, .et_pb_module .et_pb_button_0.et_pb_module:hover {
          padding-top: 2px!important;
          padding-bottom: 2px!important;
          margin-top: 5px!important;
          margin-bottom: 5px!important;
          margin-left: 8px!important;
      }
      

      I've not quite sure if it's something you added, or something being generated from within the module settings.

      If you can track that down and change the margin-bottom to 0, that will give you a tighter stacking, more in line with the example.

      Alternatively, you should be able to override it by adding this CSS:

      a.et_pb_button_0.et_pb_module, .et_pb_module a.et_pb_button_0.et_pb_module:hover {
          margin-bottom: 0px!important;
      }
      

      Hope that helps!

      Reply
  6. I am having trouble reducing the spacing between modules in a row. My column is 2/3 then 1/3, with 2/3 being an image, and 1/3 being text. I would like the space between the the right side of the image and the left side of the text to be reduced. I have played around with custom padding a little but can't seem to shrink the space.

    Reply
    • Hi Kathy, if you go into the settings for the row itself, then go to the design tab, you'll find the "Use Custom Gutter Width" option. Enable this and reduce the "Gutter Width" value that appears. It doesn't give you fine-grained control over the size of the space, but it should let you shrink the space between the two columns and will hopefully give you something that looks right. Let me know if it doesn't do the trick. Thanks!

      Reply
  7. i want to reduce the padding of 1 section. please guide. default padding is 4%. i want to replace with 0%.

    Reply
    • Hi bharat, go into the Section Settings (click on the three-lined "hamburger" menu on that section). Then click on the "Design" tab. Now go down to the "Spacing" subheading and you should find the "Custom Padding" option. Enter "0" into each of the four boxes (top, right, bottom, left), and save the settings. That should hopefully do the trick. If not, perhaps you can give me a link to the section you're working on so that I can take a look? Thanks!

      Reply
  8. Hi Dan,

    I'm having troubles eliminating the space above and below the icons. Any suggestions?

    Reply
    • Hey Alex, which icons are you talking about? If it's the first set of "Automotive", "Chemical", etc, ones on your linked page, then the padding is on the row itself. You should be able to get rid of it by going to the "design" tab of the row settings and setting the "Custom Padding" option values to 0. Let me know if that doesn't help, or if it's not the icons you mean. Thanks!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.