Why there is a padding beneath a text in swiftUI when i have applied none? is this a bug or a feature?

Question

I have a simple layout, a VStack that has two children a Text and another HStack. and very weirdly SwiftUI applied a large padding beneath the text. and more weirdly the way to solve it is to add a padding but i have to set it to 0.1. this will solve the problem and it will be drawn correclty. I want to know is this just a mere bug or there is something i don't know about swiftUI and Stacks? here is the code and also the screenshots:

struct SettingScreen: View {
    let navigationHeight : CGFloat
    @Environment(\.locale) var locale :  Locale
    var isKurdish : Bool {
        locale.identifier == "ku"
    }
    
    var body: some View {
        VStack{
            Text("Language")
                .localeFont(font: .myTitle)
            HStack{
                RecheckSelectableButtonCard(
                    imageName: "flag_uk",
                    text: "English",
                    isActive: !isKurdish,
                    onCardClick: {}
                )
                .environment(\.locale, .init(identifier: "en-US"))
                .padding(.trailing,16)
                RecheckSelectableButtonCard(
                    imageName: "flag_kurdistan",
                    text: "کوردی",
                    isActive: isKurdish,
                    onCardClick: {}
                )
                .environment(\.locale, .init(identifier: "ku"))

            }
            .padding([.leading,.trailing],16)

            Spacer()
        }
        .padding(.bottom,navigationHeight)

    }
}

These cards are my custom cards and I'm 100% sure that the HStack and the cards are not the problem. Here is the before adding padding to the text

And this is the after

it also had the same behavior when i run it on my phone

struct SettingScreen: View {
    let navigationHeight : CGFloat
    @Environment(\.locale) var locale :  Locale
    var isKurdish : Bool {
        locale.identifier == "ku"
    }
    
    var body: some View {
        VStack{
            Text("Language")
                .localeFont(font: .myTitle)
                .padding(.bottom,0.1)  // This solves the problem
            HStack{
                RecheckSelectableButtonCard(
                    imageName: "flag_uk",
                    text: "English",
                    isActive: !isKurdish,
                    onCardClick: {}
                )
                .environment(\.locale, .init(identifier: "en-US"))
                .padding(.trailing,16)
                RecheckSelectableButtonCard(
                    imageName: "flag_kurdistan",
                    text: "کوردی",
                    isActive: isKurdish,
                    onCardClick: {}
                )
                .environment(\.locale, .init(identifier: "ku"))

            }
            .padding([.leading,.trailing],16)

            Spacer()
        }
        .padding(.bottom,navigationHeight)

    }
}```

Can anyone explain to me is there another way to solve this issue ?

Answer 1

VStack applies its own spacing between items. There is no documentation on how it chooses its spacing, but it's trying to make it "good" on each platform. What it chooses can depend on the exact views, and likely adding your own .padding changes its mind about what it should do.

You can control the spacing when you create the VStack. I often find that I either want the default or zero:

VStack(spacing: 0) { ... }

With zero spacing from the VStack, you can manage it by hand with padding or fixed-sized Spacers if things get too close.