How To Add A Divider With Custom Spacing

Jan 11, 2026 SwiftUI

Divider looks deceptively simple in SwiftUI. It’s a single line, usually horizontal, that visually separates content. Understanding how Divider actually participates in SwiftUI’s layout system is the key to customizing it correctly.

This article walks through what Divider is, why it exists, what makes it noticeable in SwiftUI, and all the practical ways you can customize its spacing and appearance.

What Is a Divider in SwiftUI?

Divider is a layout-aware view that expands in the perpendicular axis of its container. Inside a VStack, it becomes a horizontal line with flexible width. Inside an HStack, it becomes a vertical line with flexible height.

Unlike drawing a line manually using Rectangle or Path, Divider adapts itself to platform conventions. On iOS, macOS, and watchOS, it respects default thickness, alignment, and layout priorities that feel “native” without extra work.

That adaptability is exactly what makes spacing control slightly unintuitive at first.

The Default Divider Behavior

Let’s start with the basics.

VStack {
    Text("Profile")
    Divider()
    Text("Account")
}
.padding()

By default, the divider takes the full available width and uses system-defined thickness. There is no intrinsic vertical spacing added. Any spacing you see comes from the VStack’s spacing or surrounding padding.

This is intentional. Divider is layout-neutral. It separates content visually, not spatially.

Custom Spacing Using Stack Spacing

The simplest and most idiomatic way to control divider spacing is by letting the container do the work.

VStack(spacing: 24) {
    Text("Profile")
    Divider()
    Text("Account")
}

This applies equal spacing above and below the divider. It’s clean, predictable, and works well when the divider belongs to the same visual rhythm as the surrounding content.

The downside is lack of asymmetry. If you want different spacing above and below, you need something more explicit.

Padding the Divider Directly

Padding is the most common approach. And usually the right one.

Divider()
    .padding(.vertical, 12)

This adds space around the divider without affecting sibling views. Because padding is part of the divider’s layout, it scales naturally across screen sizes and Dynamic Type settings.

You can also be specific:

Divider()
    .padding(.top, 8)
    .padding(.bottom, 20)

This is especially useful in forms.

Changing Thickness Using Scale or Frame

With scaleEffect:

Divider()
    .scaleEffect(y: 2)

With frame:

Divider()
    .frame(height: 1)

Hardcoding height can fight Dynamic Type and platform conventions. This is best reserved for highly custom designs where consistency outweighs adaptability.

Specifying Color

By default, Divider uses a system color that adapts to light/dark mode. You can override it safely using background modifier.

Divider()
    .background(Color.secondary)

Vertical Dividers

In an HStack, dividers become vertical automatically.

HStack {
    Text("Left")
    Divider()
    Text("Right")
}
.frame(height: 44)

This is particularly useful in toolbar-like layouts or segmented content.

Divider vs. Rectangle

Rectangle()
    .frame(height: 1)
    .padding(.vertical, 12)

This one instantly seems like the best approach. I used to think that too.

But this approach comes with its own set of shortcomings.

You get full control, but lose semantic intent. Divider communicates structure to the system and to future readers of your code. If it behaves like a divider, it should be a divider.

Customize Divider as a Reusable View

For apps with consistent divider styling, wrapping it is often the cleanest solution.

struct SpacedDivider: View {
    var body: some View {
        Divider()
            .padding(.vertical, 16)
            .padding(.horizontal, 20)
    }
}

Now your layout code stays readable:

VStack {
    Text("Profile")
    SpacedDivider()
    Text("Account")
}

This scales well across large codebases and avoids magic numbers scattered everywhere.

Final Thoughts

Custom spacing around dividers is less about fighting SwiftUI and more about embracing how layout works. Padding, stack spacing, and composition give you finer control than a single property ever could.

If it separates content, use Divider. If it needs space, give it space explicitly. That clarity pays off in both design and code.