Padding

Padding

Padding is used to create space around an element's content, inside of any defined borders. You have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding Top

usage is .paddingTop(" ")

VStack(
    Text("This text has a top padding of 30 px")
    .background("red").foregroundColor("white").paddingTop("30px")
)

Padding Bottom

usage is .paddingBottom(" ")

VStack(
    Text("This text has a bottom padding of 30 px")
    .background("red").foregroundColor("white").paddingBottom("30px")
)

Padding Right

usage is .paddingRight(" ")

VStack(
    Text("This text has a right padding of 30 px")
    .background("red").foregroundColor("white").paddingRight("30px")
)

Padding Left

usage is .paddingLeft(" ")

VStack(
    Text("This text has a left padding of 30 px")
    .background("red").foregroundColor("white").paddingLeft("30px")
)

Other Padding Usages

Padding All

usage is .padding(" ")

VStack(
    Text("This text has a top, bottom, left, and right padding of 30px.")
    .background("red").foregroundColor("white").padding("30px")
)

Padding Left-Right Top-Bottom

usage is .padding("TOPBOTTOMpx LEFTRIGHTpx")

VStack(
    Text("This text has a top and bottom padding of 25px, and a right and left padding of 50px.")
    .background("red").foregroundColor("white").padding("25px 50px")
)

Padding Top Right-Left Bottom,

usage is .padding("TOPpx LEFTRIGHTpx BOTTOMpx")

VStack(
    Text("This text has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.")
    .background("red").foregroundColor("white").padding("25px 50px 75px")
)