How to Eliminate Form Padding in NavigationStack

Question

I have a form being loaded inside a navigation stack and I'm showing an image and title in the first form section with the code below:

Form {
    Section {
        VStack {
            Image("AboutIcon")
                .resizable()
                .frame(width: 96, height: 96)
                .clipShape(RoundedRectangle(cornerRadius: 16))
            Text("LinkSwing")
                .font(.headline)
        }
        .frame(maxWidth: .infinity)
    }
    .listRowBackground(Color(.systemGroupedBackground))
}

When rendered, there is significant top and bottom padding surrounding the section, highlighted in purple in the image below.

I have tried various options to set padding, edge insets, etc., but have not found the right option or combination to eliminate the unnecessary top and bottom padding.

Any suggestions and/or tips for how I can diagnose similar layout problems in the future?

Answer 1

If you want to remove the margins above and below the whole Form, try applying .contentMargins(.vertical, 0) to the Form itself:

Form {
    // as before
}
.contentMargins(.vertical, 0) // 👈 here
.scrollContentBackground(.hidden)
.background(.blue.opacity(0.2))

For the spacing inside the Form, see the answer from Sweeper.

Answer 2

I believe this spacing is by-design for list rows. On the other hand, section headers have less padding, so you could try that. The background of section headers is transparent

NavigationStack {
    Form {
        Section {
            // some dummy form content
            Button("Foo") {}
        } header: {
            VStack {
                Image("my_image")
                    .resizable()
                    .frame(width: 96, height: 96)
                    .clipShape(RoundedRectangle(cornerRadius: 16))
                Text("LinkSwing")
                    // you need to some modifiers to remove the default text styling on section headers
                    .foregroundStyle(Color(.label))
                    .textCase(nil)
                    .font(.headline)
            }
            .frame(maxWidth: .infinity)
        }
        .navigationTitle("Foo")
        .navigationBarTitleDisplayMode(.inline)
    }
}

This produces

If you still think the padding is too much, you can always add negative padding to .top and/or .bottom.

In iOS 26, you can use listSectionMargin to adjust the spacing directly, though I still think section headers are more suitable.

Example:

NavigationStack {
    Form {
        Section {
            VStack {
                Image("my_image")
                    .resizable()
                    .frame(width: 96, height: 96)
                    .clipShape(RoundedRectangle(cornerRadius: 16))
                Text("LinkSwing")
                    .foregroundStyle(Color(.label))
                    .textCase(nil)
                    .font(.headline)
            }
            .frame(maxWidth: .infinity)
            .listRowBackground(Color(.systemGroupedBackground))
        }
        .listSectionMargins(.top, -10)
        Section {
            // some dummy form content
            Button("Foo") {}
        }
        .listSectionMargins(.top, -10)
    }
    .navigationTitle("Foo")
    .navigationBarTitleDisplayMode(.inline)
}

produces