What problem does this address?

Margins are good for spacing out items. However in many cases, gap (see details) provides a much better experience for laying out items.

Instead of spacing items by providing margins on child elements, a gap as applied to the container defines how much space is between the child elements.

This illustration, courtesy of CSS-tricks, showcases very well how it works:

While it can accomplish the same, there are a few benefits. Here, the navigation block is shown with a few menu items, spaced using margin, and in various justifications:

In this screenshot, the light red items have right-margins applied to space items out, and then uses :last-child to nullify the right-most margin. But this quickly makes for some growing complexity:

• If the navigation items wrap, then the last-child will no longer be the right-most item.
• If the navigation has a different justification, margins will need further adjusting.
• While much of the RTL context is handled by the build system in the block editor, for themes needing to override values, they would have a harder time.

What is your proposed solution?

Using gap (shorthand for column-gap and row-gap) removes all of those headaches, simplifying the CSS and making it more predicactable, yet can still accomplish exactly the same. Only, you no longer have to worry about last-child or RTL considerations, and you have only a single property to consider for spacing out items inside.

Note that the gap needs to be applied to the container instead of the child items, and it need for that container to be a flex or grid item. However as a property supported in global styles for containers such as navigation, buttons or group, it could make for an excellent solution.

It would need some visual explorations for how it need be surfaced in the UI. Since the Buttons block already uses gap to space buttons out, though, it might be worth surfacing the feature in theme.json even before a UI was made available.