Hi!
Thanks for reaching out - this is indeed a very interesting problem 
Truth is - this is caused by specific mix of CSS Table element’s behaviour and applied padding to visually separate said elements. Why do we use display: table here? It’s mostly due to technical limitations the initial maintainers of this feature had to compromise for when this pattern was introduced…
Let me give you a little bit of the background:
AUI page layout was initially proposed in AUI 3.6 (~ October 2011) and became a full-member of the library in AUI 5.1 (~ May 2013).
The world was completely diffferent back then.
Back in 2011 Internet Explorer still dominated the global market, chrome 14 was gaining the momentum with Firefox 7 creeping just after… iPhone 4S has just debuted and the mobile-web revolution was actually just about to start… in 2013 chrome has already won the dominance but the competition was still very sharp and future extremely unpredictable…
Browsers were often competing with adopting different standards, in very early stages of standardisation; sometimes - in ways incompatible between one another.
Technological choices, given average length of “version life” for Atlassian products always had to (and most probably - always will) accommodate a very wide set of supported browsers, with various bugs or limitations.
At those times we already had some remarkable possibilities upcoming - such as CSS Flexible Box Layout Module or CSS Grid Layout Module. Unfortunately - they were in very early stages of adoption, with various differences between browser vendors (or even - versions of same browser) and - worst of all - not supported by IE which still bared important portion of the user base.
When working on a bullet-proof solution the team had to make a tough-call and decided to opt in for next-best-thing - the CSS Table display, which already gained pretty good support. This allowed the team to bring in the power of CSS flexibility to a very simple, clean and easy to understand markup.
That, unfortunately, was also occupied with certain counter-intuitive behaviour of table-based layouting.
Instead of aiming for (probably unachievable) perfection in the given stack - the team decided that certain flaws, such as mentioned 20px needed to achieve visual separation of the content, may as well get consumed from the n+1 elements, until a better technology allows for universally acceptable solution.
As per our announcement with AUI 9 we officially dropped the support for IE 11. Therefore things like wide adoption of CSS Flex became a possibility.
Does that mean we’ll rewrite the AUI page layout pattern?
As of today - I can’t say definitively.
AUI 9 was a huge milestone where we brought in such features as dark mode (or, generally speaking, themability hint hint) and re-worked vast portion of the components, making sure they’re accessible to all the users - whether they use keyboard based navigation, are visually impaired or use any means of assistive technologies.
But we’re not done, yet… there’s tons of things to improve.
If you believe that better page layout will help you and / or your users to have better, more accessible experience with Atlassian products - tell us so.
We’ll definitely be listening!
TL;DR
CSS Table Layout did not / does not provide a good, cross-browser mean to accommodate such behaviour in all situations. AUI team decided, back in 2011, that 20px offset for n+1 elements is - maybe - not ideal, but still pretty workable while requiring minimum markup and CSS browser-specific hacks.
The times have changed, technology potentially allows for better.
Question remains - is this the most critical, impactful feature requested by AUI users?
Tell us, and we’ll definitely listen!
From Server Platform,
with 