Why does adding a frame() to an image add padding in between the image and it's sibling?

Question

Why does adding a frame() to an image add padding in between the image and it's sibling? E.g. why is there padding underneath the A, but not the B, in this example? Thank you!

struct ContentView: View {
    var body: some View {
        VStack {
            Text("A")
                .border(Color.red, width:1)
            Image(systemName: "globe")
                .frame(minHeight:50)
                .border(Color.black, width:1)
        }
        .border(Color.green, width:1)
        VStack {
            Text("B")
                .border(Color.red, width:1)
            Image(systemName: "globe")
                .border(Color.black, width:1)
        }
        .border(Color.green, width:1)

    }
}

score 1 · Accepted Answer · answered Jul 26 '23 at 02:48

I think this is because symbol images are treated like text by SwiftUI. Each symbol is a "glyph".

Layout out

VStack {
    Text("A")
    Image(systemName: "globe")
}

is a bit like laying out two lines of text (though not literally two lines, because lineSpacing doesn't have an effect on this). Because these are all text, the VStack tries to make it look like one whole "text block", and doesn't add extra space between them. That is how text is supposed to flow.

Once you add a frame, the VStack doesn't see them as the same text block anymore, and adds the default spacing it normally adds between views. You can see this in effect when you add non-symbol images, or other non-text views:

// this also adds default spacing
VStack {
    Text("A")
    Rectangle().fill(.red)
}

// this too!
VStack {
    Text("A")
    Image("some non-symbol image")
}

You can remove the default spacing by setting spacing: 0.

Thank you! I accepted your answer. May I ask if you know where there is documentation that explains this behavior? I don't think it's included in the VStack, Text or Image documentation. — John Cashew, Jul 28 '23 at 20:56
@JohnCashew the initialiser [documentation](https://developer.apple.com/documentation/swiftui/vstack/init(alignment:spacing:content:)) says “or nil if you want the stack to choose a default distance for each pair of subviews” for the `spacing` parameter. There is also [this discussion](https://forums.swift.org/t/why-is-the-default-spacing-in-swiftui-stacks-non-zero/64006). — Sweeper, Jul 29 '23 at 00:16

Why does adding a frame() to an image add padding in between the image and it's sibling?

1 Answers1