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.

Padding Error

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?

• UnstoppableWil: You can use a negative CGFloat for padding (.padding(.all, -10) for example after the .listRowBackground), but it's not ideal if you plan on supporting different screen sizes

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))

Screenshot

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

• user986713: Thanks - I think this most directly addressed the question and eliminated the top purple margin!

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

enter image description here

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

enter image description here

• user986713: Thanks - this might not be the best approach for how I have the rest of the form set up, but is definitely a clever trick I will keep in mind for the future!