Ability to remove default margins/gaps between modules in columns

Issue is that Elementor adds this margin bottom rule to all modules by default.
.elementor-widget:not(:last-child) {
margin-bottom: 20px;
}
One setting to remove it from between modules would be great

Funny thing I just mentioned this in another thread here. I find that this rule comes into play about 10% of the time and you are correct, there is no direct setting to disable this.

Here’s what I do.

1) add -20px margin to item below via Elementor Editor
2) Add custom css, i.e. styles.css

body:not(.elementor-editor-active) .elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

This results in allowing the margin in the back end editor to keep things functioning, 20px is also the height of the “section / column” tabs, but eliminating it on the front end. I used to use #2…You’ll have to add margins to everything though, a lot, trust me, so I now just use #1 most of the time or use EPro’s custom css and do:

selector .elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

Thanks @pingram3541 . This will come in handy. The setting much is needed. Am not a fan of too many negative margins yet option 2 means more tinkering. Will have to balance both out some way…

Sometimes I apply the above rule in EPro custom css of the Section so it applies to all elements within that section, for example when using the StylePress for Elementor plugin i.e header and footer page wrapper designs, often for menu’s, logo’s, social icon’s etc we don’t want that spacing…but inside copy content we usually do.

The same can be done using styles.css and giving your Section a unique id or class.

• This reply was modified 8 years ago by pingram.

Thanks Phil.