Reducing Divi Builder Module Spacing

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.

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

Divi Booster

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

41 Comments

  1. How to reduce the margin width, which is present after sidebar as well as before the content?

    Reply
    • Hey Nirmal, there's an option in the Customizer ("Divi > Theme Customizer > General Settings > Layout Settings > Website Content Width") which makes the content (and sidebar) wider, thereby reducing the margin to the left of the content and the margin to the right of the sidebar… does that do what you need?

      Reply
  2. I'm having trouble reducing the spacing between the top menu bar and the first slider image.

    Reply
    • Hi Scott, I'm not exactly sure why you're getting this spacing, but you should be able to remove it with the following CSS:

      .home #page-container { padding-top: 0 !important; }
      

      You can add that into the "Divi > Theme Options > General > Custom CSS" box. Hope it helps.

      Reply
    • Try this

      .home #page-container {
      position: absolute !important;
      top: 0 !important;
      width: 100% !important;
      }

      Reply
  3. I'm struggling with eliminating the margin – or padding? – that appears above and below full width background images and elements like sliders within a row or module when the browser is minimized to replicated tablet or phone widths, and on the devices themselves. Example: http://egnewdev2017.ellengoodwin.com/ – the top slider and the lower background images gain space above and below the element, revealing the background color, when the browser is narrowed. Any thoughts are appreciated!

    Reply
  4. Title here mentions space between modules, but doesn't address that well. I'm looking at a premade Divi footer layout from their pack, which has one row with multiple modules in each column. I want to decrease or eliminate the vertical separation between modules stacked on each other in one column. How to do that? Thanks.

    Reply
    • Hi Hilary, thanks for the comment. I've added a section to the post above ("Adjusting the Vertical Gap Between Divi Builder Modules") which should hopefully help you out.

      Let me know if you are still unable to get the separation you want. Thanks!

      Reply
  5. Hello Dan, I'm a fan of this site and you
    I have a problem with DIVI and I can not find a solution anywhere, can you help me?

    The title of the page on the site is left with a very large margin of the header (as you can see in the attached image or at http://www.agendaprime.com/contact).

    I would like to know how to remove or reduce the size of this spacing, can you help me?

    Thanks in advance!

    PRINT: http://oi64.tinypic.com/sfymfa.jpg

    Reply
    • Hi Diego,

      I think this bit of CSS should sort it out:

      #main-content .container { padding-top: 0 !important; }
      

      If it's only happening on a handful of pages, I'd suggest adding this CSS to just those pages, using the Custom CSS box found when you click on the three-lined "hamburger" menu box at the top right of the purple Divi Builder box on the page edit screen. If you are having the problem across the whole site, I'd add it into the Custom CSS box within the main options, at: Divi > Theme Options > General > Custom CSS.

      I think the issue is probably caused by the section added above the menu – it looks like Divi might be incorrectly calculating the padding as a result. The CSS I've given you overrides that padding amount. Hope it helps!

      Reply
      • It didnt work for me. I tried every answer above this post and it still hasnt removed the large space above the first blurb picture

        Reply
        • Hi Dianne, is this on the "Branding", "Coded with XML", etc, blurbs on the site linked in your profile? I'm not sure if I'm seeing the same as you, but they look fine to me on the desktop (all 3 blurbs start at the same place and the gap above them all looks okay), but on mobile there is a bigger gap between the "We brand your xero templates" image and the first blurb (i.e. "Branding") than there is between the subsequent blurbs. Is it that you're trying to reduce? If so, the bulk of this gap is coming from the 30px of bottom padding on row containing the xero templates image and the 30px of top padding on the row containing the blurbs. Go into the row settings for either of these rows and you should find a "Custom Padding" option on the "Design" tab. If you type anything into one custom padding boxes (which you can later delete) and then click away from the box, a mobile icon will appear to the right. Click on this and you'll get options to set custom padding specific to mobiles or tablets. Set the top / bottom custom padding for the mobiles to something smaller that 30px and it should reduce your gap.

          I hope that helps, but let me know if it isn't clear or I'm looking at the wrong set of blurbs. Cheers!

          Reply
  6. CSS code still working as of July 2017. thank you!

    Reply
  7. Thank you so much..worked just fine

    Reply
  8. Thanks so much for this post – I found it quickly doing a search. Just what I needed.

    Reply
  9. Hey Dan – you seem like an awesome, chill dude. Thank you for the tutorials. Every page I go on seems to have at least one person indignant that you didn't include where to add the code. Silly geese. Thanks again!

    Reply
    • You're welcome, Alex. Yeah, that's totally my fault. I've always been planning to go back and update my old tutorials with the appropriate info, but I never quite seem to find the time. So for now I've just been adding them when someone asks. One day I'll get round to it! :)

      Reply
  10. Thanks a lot for not mentioning that in your original article. Could have saved a lot of time.

    Reply
    • Hi Brian, are you talking about where to put the CSS? I've just updated the post to include it.

      Reply
      • Thanks Dan You Rock!

        Reply
  11. you can try only this on css fields : padding-top: 30px !important;
    seems to work

    Reply
    • Thanks for sharing that, Emanuela :)

      Reply
  12. Where does this code get inserted? If I open my modules and paste this in the custom CSS fields (I've tried "before" "main element" and "after"), it doesn't change that wide margin at the top of every page.

    Reply

Submit a Comment

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