Max Stoiber on using margins in UI components:
Margin breaks component encapsulation. A well-built component should not affect anything outside itself.
It’s very hard to disagree with this statement if you’ve been involved in any capacity with creating reusable UI components. Baked-in margins can and will hinder component reuse across different adaptive layouts.
A few years back, margins were the only way to create float-based grid layouts in CSS. Today, margin gymnastics are no longer necessary.
Instead of margin I have started using spacer components, which move the responsibility of managing space to the parent-level.
Implementation details aside, delegating the spacing between adjacent items to the wrapping component is the right approach. For instance, SwiftUI uses a similar API to the one suggested in the blog post:
VStack(spacing: 8) {
Text(”Item 1”)
Text(”Item 2”)
Text(”Item 3”)
}