Reducing Divi Builder Module Spacing

This post may contain referral links which may earn a commission for this site

Reducing Divi Builder Module Spacing

This post covers some of the ways you can increase, reduce or eliminate the space around Divi 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.

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

37 Comments

  1. 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
  2. how to remove space between textbox and button in contact form ??

    Reply
  3. 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
  4. 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
  5. 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
  6. 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

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

Hundreds of new features for Divi
in one easy-to-use plugin

37 Comments

  1. 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
  2. how to remove space between textbox and button in contact form ??

    Reply
  3. 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
  4. 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
  5. 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
  6. 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

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