How to Use Padding in SwiftUI

Use padding in SwiftUI when views need space around their content to improve readability, tap targets, and layout breathing room. It is one of the most common modifiers in real-world SwiftUI design.

What you’ll build or solve

You’ll learn how to use padding in SwiftUI with default spacing, custom values, and directional control. You’ll also know when frames or spacers are a better fit.

When this approach works best

This approach is the right choice when the space should stay attached to a specific view instead of flexing across the container.

Common real-world scenarios include:

• Button tap areas
• Card content spacing
• Section headers
• Form rows
• Page margins

This is a bad idea when the gap should flex dynamically with screen size.

Prerequisites

You only need:

• Basic SwiftUI views
• Familiarity with modifiers
• Understanding of layout basics

Step-by-step instructions

Step 1: Add default padding

The simplest form adds system spacing on all sides.

import SwiftUI

struct WelcomeView: View {
    var body: some View {
        Text("Welcome to Mimo")
            .padding()
    }
}

This adds a clean default margin.

It is the best starting point for most layouts.

Step 2: Use custom padding values

For exact spacing, pass a number.

Text("Continue")
    .padding(24)

This creates 24 points of space on every side.

Step 3: Apply padding to one edge

Padding can target specific directions.

Text("Title")
    .padding(.top, 16)
    .padding(.horizontal, 20)

This is great for card layouts and screen sections.

Step 4: Combine padding with backgrounds

Padding often works best before backgrounds.

Text("Pro Plan")
    .padding()
    .background(.blue)

This makes the background wrap the padded area.

What to look for:

• .padding() uses system spacing
• Custom values give exact control
• Directional padding targets edges
• Great for tap areas and cards
• Order matters with backgrounds

Examples you can copy

Default margin

.padding()

Horizontal page spacing

.padding(.horizontal, 20)

Top spacing

.padding(.top, 16)

Common mistakes and how to fix them

Mistake 1: Using padding for flexible layout gaps

What the reader might do:

Use large padding to push views apart.

Why it breaks: the gap stays fixed.

Corrected approach:

Use Spacer().

Mistake 2: Applying background before padding

What the reader might do:

.background(.blue)
.padding()

Why it breaks: the background stays tight to the text.

Corrected approach:

Apply padding first.

Mistake 3: Stacking repeated padding modifiers unnecessarily

What the reader might do:

Add .padding(.top) and .padding(.horizontal) many times.

Why it breaks: layout becomes harder to reason about.

Corrected approach:

Consolidate where possible.

Troubleshooting

If the background looks too small, move padding before it.

If spacing should flex, use Spacer().

If edges feel uneven, use directional padding.

If layouts become noisy, simplify modifier chains.

Quick recap

• Use padding for view-attached spacing
• Default padding uses system values
• Add custom or directional padding when needed
• Apply before backgrounds
• Use Spacer() for flexible gaps