Should a component own its outer spacing?

WHAT THIS TESTS This is a judgment question about where spacing responsibility lives, testing whether you apply the OOCSS principle of separating container from content to real architecture decisions. It reveals whether your components are genuinely reusable.

A GOOD ANSWER COVERS Draw the line at internal versus external spacing. A component should own its internal spacing, padding, because that is part of the component's own appearance and is the same wherever it appears. It should not own external spacing, the margin between it and its neighbors, because the right gap depends on context: a card might sit flush in one layout and spaced in another. By OOCSS, the component is the content and must not depend on its container; baking outer margins couples it to one context. Instead, let a parent layout component own the rhythm, using gap on flex or grid, a stack or owl selector, or layout-level margin utilities. This keeps components context-independent and avoids surprises when they move.

COMMON WRONG ANSWERS Giving every component a bottom margin, which causes double spacing when stacked, unexpected collapse, and different looks per context. Relying on margin collapse as a feature, which is fragile. Mixing both padding and outer margin into the component so callers fight the defaults.

LIKELY FOLLOW-UPS How does the gap property change this calculus versus margins? What is margin collapse and why does it argue against component-owned outer margins? How do layout primitives like Stack encapsulate spacing? When is a small exception acceptable?

ONE CONCRETE EXAMPLE A button defines its own padding so its hit area is consistent everywhere, but it sets no outer margin. When buttons appear in a toolbar, a flex container with a gap value controls the space between them; in a form, a vertical stack layout sets the rhythm. The same button drops into both contexts unchanged because spacing between elements is the parent's job.