No outer margins

The problem with outer margins and paddings like the examples above is that it breaks encapsulation. [...] Essentially, styles like these have an impact on the other components around it. Components with outer margins get their elbows out, NBA Jam style, knocking around adjacent components.

The impact of these styles often lead to what I call “compensations”, essentially workarounds to undo what we’ve already done.

Not only do outer margins require compensations, they give the underlying component too many responsibilities. External spacing should never be the responsibility of a component. Components should only ever be concerned with internal spacing.

The solution to this problem is simple, use parent elements or components for layout and spacing. [...] I find the best solutions heavily use Flex or Grid containers with gap to apply spacing.