Spacing with padding and Spacer

Both create empty space, but they participate in layout differently. Padding adds space around a view; a spacer takes up available space within a stack.

Padding

Text("Hello World!")
	.background(Color.yellow)
	.padding() // Padding on all edges
    .padding(.all, 20) // Padding of 20 on all edges
    .padding(.vertical, 20) // Vertical padding of 20
    .padding(.leading, 20) // Leading padding of 20
	.background(Color.yellow)

Spacer

A Spacer creates flexible empty space inside a stack, expanding where the layout allows it.

HStack {
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.blue)
	Spacer() // Place the rectangles at opposite edges
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.yellow)
}

Use minLength to specify a minimum amount of space rather than relying on the platform's default.

HStack {
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.blue)
	Spacer(minLength: 20) // Keep a minimum width of 20
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.yellow)
}
.padding(.horizontal, 200) // Horizontal padding of 200

Apply a frame when a fixed amount of space is needed.

HStack {
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.blue)
	Spacer()
    	.frame(width: 50) // Horizontal padding of 50
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.yellow)
}