SwiftUI Padding Vs Spacing

Which to use, when and why

We’ve all been there (Credit:
Apollonia Ponti)

Having a mix of padding and spacing can get confusing, especially when they combine to create effects not immediately obvious in code.

Here, I propose a convention to decide when to use which, consistently, and with a rationale that other engineers can use to review your code.

It’s one of my SwiftUI “Rules of Thumb”. For more, consider reading my other article: Chloe’s Opinionated and Biased Law of SwiftUI (do it… do it now).

When do I use which?

I’ve made this as simple as possible.

If it’s a list or a feed of repeating components, especially using a ForEach, use spacing. Everything else is padding, even if the padding happens to be the same for every component. If in doubt, use padding.

All over the shop

Combining padding and spacing, especially when the spacing being the same is coincidental and not inherent in the nature of the context (i.e. a feed or list), causes confusion and makes it much harder to change later. It also means engineers reading it need to combine VStack/HStack spacing with any vertical/horizontal padding, respectively, in their heads- meaning what they read is not the direct truth. And when I read it, I scream “Whyyyy” and immediately decline your PR and revoke your git access.

Incorrect Usage

VStack(spacing: 8) {
  Text("Title")
  Text("Description description")
}

This is not a list or feed. If we add another Text in the future, it’s unlikely the spacing will still be 8 consistently. This means future engineers would need to remove the spacing and add padding to the existing components as well as the new one.

Yes, the vertical padding is the same for all components, but that is a coincidence and could be said about any view with only 2 components.

VStack(spacing: 8) {
  Text("Title")
  Text("Description description")
  Button().padding(.top, 4)
}

This numpty has been asked to add a new Button to this view. Like a numpty, they’ve kept their ill-conceived spacing: 8 and corrected the issue of the slightly wider padding between the text and the button by adding the difference to a padding modifier.

Numpty ˈnʌmptɪ: British, noun
1. A person lacking intelligence, an idiot, a fool, the person who designed Obj-C
2. An engineer who incorrectly uses spacing in SwiftUI

As an engineer, I now look at this and think that there is 4 padding between the button and the text, when there is actually 12.

You can see how this problem could grow out of control in more complex views- so leave that spacing alone! (No offence, numpties)

Correct Usage

VStack(spacing: 8) {
  ForEach(models) { model in
    ListItem(model)
  }
}

List(models) { model in
  ListItem(model).padding(.vertical, 8)
}

VStack(spacing: .zero) {
  Text().padding(.bottom, 8)
  Text()
}

Oof, what a lovely bit of coding. This guy ^ amirite?

TLDR

If it’s a list or a feed of repeating components, especially using a ForEach, use spacing.

Everything else is padding, even if the padding happens to be the same for every component.

If in doubt, use padding.