How to reduce space between elements

Sometimes, users will create 'negative margins' in attempting to reduce space between elements on their website. While negative margins have their place in creating specific layouts, they often result in overlapping elements and unexpected behaviour on different screen sizes if not used correctly.

Here's a guide on how to get the results you need while avoiding common pitfalls.

👎 Incorrect approach: Element A has margins of 20px surrounding it, and Element B has margins of 20px surrounding it, causing a 40px gap between the two elements. Let’s say the user wants a result of only 5px of space between Element A and Element B. The user will sometimes apply a -35px margin to close the gap. Any time negative margins are used you’re essentially overlapping elements, which can cause issues on mobile display, inconsistencies in various screen sizes, and clickable elements being overlapped so they can no longer be clicked. In short, using negative margins is the wrong method.

👍 Correct approach: The user can reduce the margin of Element A to 2.5px and that of Element B to 2.5px, giving a total gap of 5px between the two elements. It’s that simple. Instead of applying your margins only to the element you’re moving at that moment, apply them to both elements on either side of the margin. This eliminates negative margins and ensures the elements structure remains intact.