- The most usage of spacing in Elementor is on the widgets. Most of that spacing is expected to be a fixed gap (eg: margin between a headline, description, and button).
%are often very misunderstood in regards to spacing
The main reason I’ve seen people requesting
% for is better responsive scaling. But that’s partially a myth.
EMs are just pixels, but multiplied
em is relative to font sizes which makes it a subpar alternative for spacing between elements. It can unexpectedly vary from others due to a potentially different calculated font size on a particular element or its parent. And since it’s just a multiplier for pixels, it doesn’t come with much of an advantage for responsive scaling. It’s just
px under the hood.
% is not calculated on the basis of the device’s width, but the element’s width
This is the fact that’s mostly not known to designers –
% is actually calculated based on the width of that particular element.
This fact itself makes it a very unreliable unit for spacing because its rendered value would vary based on the element’s width, and be very hard to estimate the amount of spacing being applied.
4% of a full-width section would be different than 4% of a 700px wide headline than 4% of an inline button
Sure, for the full-width section, you would get responsive scaling, but going from a full-width section down to mobile, the
% difference would be so vast that you would most likely have to end up re-defining a different
% value for mobile on that section anyways.
4% of a full-width section on a
1366px screen size (a standard laptop resolution) would be
4% of the same full-width section on an iPhone (
375px wide) would be
15px. Now, unless you want only
15px wide gap on a section vertically, you would have to adjust it to a larger number so that it leaves appropriate negative space in your design.
In other cases of elements with limited size (which is mostly the case for elements inside half or 1/3rd columns),
% won’t make any difference because the end size of the element (rendered size on the screen) will stay relatively the same.
The general argument for using these other units is that they are “responsive”, though, if you actually look into the process, most people would just eyeball the gap with these units (since there’s no way to instantly calculate equal gap for each element of different widths) and have to apply a different value for responsive breakpoints anyways since it’s hard to estimate it for every device.
This leads to inconsistencies across the board in your end design.
So, for these reasons, I generally recommend against using
em for spacing (padding & margins).
% is mostly good for only sections in Elementor, that too, occasionally.
Sure, they have their niche use cases, but most of the times, they’re not ideal mainly due to their unpredictability.
This is why the addon only offers you
px for spacing adjustment with the quick spacers.