Howto remove space between wordpress divi theme's sections - css

Question

How I can remove space between wordpress Divi theme's sections?

Answer 1

Vasili has a great answer, however, when you view the properties of a row/column in the Divi builder - you will see two rows of settings for Custom Margin and Custom Padding. These will be under the regular options on some elements, and under Advanced Design Settings on others.
By default those are left blank, however that does NOT mean that they are set to 0. If you change the padding on top/bottom and margin on top/bottom to 0 you should be able to remove the space without having to use code, and a ton of CSS !important tags.
As a general rule of thumb, avoid !important tags as much as possible. Overwriting certain rows in DIVI is not always going to be effective - you may have a row where you need padding on one page, and twenty that you don't on others. I would suggest trying to do as much as possible through the builder, if that is what you are using to build the page.

Answer 2

To make this more useful for beginners.
Without using code you can try if just putting another row within the same section is enough for you.
If not we could do what poostchi has done we can change the css for the section.
Now if you go to your website and right click a section and select inspect element (assuming your browser is chrome) you will see your section coded like this.
<div class="et_pb_section et_section_regular" style="background-color:#2388e0;">
<div class="et_pb_row">
<div class="et_pb_column et_pb_column_4_4">
<div class="et_pb_text et_pb_bg_layout_dark et_pb_text_align_left">
This is row 1 section 1
</div> <!-- .et_pb_text --><div class="et_pb_text et_pb_bg_layout_light et_pb_text_align_left">
this is row 2 of section 1
</div> <!-- .et_pb_text -->
</div> <!-- .et_pb_column -->
</div> <!-- .et_pb_row -->
</div>
Here we see they are using the class et_pb_section
clicking on the class name will show the class css code which has the 50 pixels padding value:
.et_pb_section {
padding: 50px 0;
position: relative;
}
So all we have to do is overwrite the padding value there to 0 which was what pootschi has done.
.et_pb_section{
padding-top: 0px !important;
}
the !important tells css to overwrite with this.
But by doing this ALL your sections DIVI defined padding value will be overwritten.
So what if you only want to reduce a gap for only a specific section?
Divi has included the css ID an css CLASS to allow better customization over their sections an modules. You can find this by clicking on the edit button of our section.
CLASS method
Give your section a CSS CLASS name: reduce_top_padding_here
then you can do this.
.reduce_top_padding_here {
padding-top: 0px !important
}
Now where do we put this css code?
Divi has allowed easy css edit by going into
Appearance > Divi Theme Options > General Settings >
scroll down to find "Custom css" (paste the code in here.)
Explanation:
Here you have created your own css class. So ONLY the section or module that you give this class name to, will inherit this css display instruction to give the top padding 0 pixels. Instead of over writing DIVI's main .et_pb_section class.
Note the dot in front of the class name means in css that name is a class.
So summary to edit a specific section
1- Give your section a CSS CLASS
2- then define that CSS class value in divi theme options > "custom css"

Answer 3

I'm not sure if Divi theme had this at the time but if you go to the Divi Theme Customizer > General Settings > Layout Settings there's Section Height and Row Height.
For mobile go to the Divi Theme Customizer > Mobile Styles, Phone and Tablet both have section and row heights.
You still may need some CSS.

Answer 4

I just found it!
.et_pb_section{
padding-top: 0px !important;
}

Answer 5

I would like to expand on what Vasili has shared, in order to provide a more complete answer (especially regarding the exclusion of full width sections).
I suspect Alex Seidler's answer has missed the point. I suspect the questioner wants to remove this padding site wide. Doing that via the Divi builder, as he suggested, is going to be very tedious and will in fact introduce a lot more (Divi generated) additional CSS to the site, including all the !important tags (regarding that, see the last note at the end of this answer).
Just as Vasili and the person who asked the question has pointed out, the following code will override the padding on all sections.
.et_pb_section{
padding-top: 50px !important;
}
Note, that 54px top and bottom is currently the default on screens over 1350px. 4% is the default on screens 981p and less. I say "currently" because I recall it used to be 50px. It might still be 50%. Whatever the case, reduce this according to your needs. The questioner wants all spacing removed, in which case set it to padding-top: 0 !important.
Excluding full-width sections
The above-mentioned change may have some undesirable effects if you use any full width sections. If that occurs, you may want to exclude those sections, with the following:
:not(.et_pb_fullwidth_section).et_pb_section {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
Remember, this will impact all rows, within all sections.
Specific Sections only
If you want to only override the padding on specific sections, use the suggestion made by Vasili in his answer.
Reducing Row padding
Anyone wanting to reduce the default section vertical padding might also find themselves wanting to reduce Row vertical padding.
For that, add this CSS to your child-theme styles.css file:
.et_pb_row { padding-top: 30px !important; }
30px is the default. Reduce this to suit your needs.
Specific Rows only
To reduce specific rows only, you can either do it on a row-by-row basis in the Divi Builder "Design" tab for the row(s) in question, or you can give the rows a unique class (in the "Advanced" tab of the row settings), and then apply the settings to that class in your your child-theme styles.css file. This is the same process as changing specific sections. For example, give the rows the class `row-reduced-top-padding' and then it the styles.css file:
.row-reduced-top-padding { padding-top: 10px !important; }
The advantage of this method is it is much faster to adjust the settings later on, especially if you've applied this to quite a few rows.
Avoiding !important, not possible
As for the comment from Alex Seidler about avoiding using the !important tag: Whilst it's true it's best to avoid this, in this situation it's unavoidable. Last time I checked, even Divi itself will use the !important tag when you make changes to the margins and padding of sections and rows via the Divi Builder. This is because it is also having to over-ride the site-wide defaults, which have already been declared by Divi.