Why SwiftUI Image add an extra padding to enclosing VStack?

Question

I'm struggling with a very simple problem. If I put a Text into a VStack, there is no padding on the top. If I now put an Image, I have a padding. See the following screenshot:

The corresponding code is:

struct NewView: View {
    var body: some View {

        VStack(alignment: .leading) {

            Text("Some title")
                .font(.headline)

            VStack {
                Text("Some text")
                    .font(.headline)
                    .padding(.leading)
                    .frame(maxWidth: .infinity)
                    .background(Color.yellow)
            }
            .padding()
            .background(Color(white: 0.90))
            .cornerRadius(10)


            Divider()
                .padding(.vertical)

            Text("Some title")
                .font(.headline)

            VStack {
                Image(systemName: "1.circle.fill")
                    .resizable()
                    .fixedSize()
                    .frame(maxWidth: .infinity)
                    .background(Color.yellow)

            }
            .padding()
            .background(Color(white: 0.90))
            .cornerRadius(10)

        }
    }
}

The answer is probably very simple. What did I miss? Thanks in advance for you help.

Answer 1

There are different default paddings between different UI elements, if you want explicit, use spacing as below

VStack(alignment: .leading, spacing: 0) {