---
title: "Padding"
description: "The padding modifier adds padding to a view."
url: https://www.swiftuifieldguide.com/layout/padding
markdown_url: https://www.swiftuifieldguide.com/layout/padding.md
---
> Convenience Markdown export of the HTML page. Interactive samples, diagrams, and visualizations stay on the canonical page.
# Padding

The `padding` modifier adds padding to a view. It does so by taking the proposed size and subtracting the padding. Likewise, it adds padding to the reported size of its child. When we don't specify additional parameters, the default system padding ( on this website) is used, and it's applied to all edges.

> Pretty-printed code from Sample0

```txt
Color.blue
    .padding()
```

> Interactive example on HTML page: Sample0.

We can also specify an explicit value for the padding:

> Pretty-printed code from Sample1

```txt
Color.blue
    .padding()
```

> Interactive example on HTML page: Sample1.

Sometimes, negative padding can be useful to break out of the bounds of a view. In the example below, the background gets proposed the size of the text, but the negative padding makes sure the green rectangle is larger.

> Pretty-printed code from Sample Negative Padding

```swift
HStack {
    Text("Hello")
    Text("World")
        .background {
            Color.green
                .padding()
        }
}
.padding(20)
```

> Interactive example on HTML page: Sample Negative Padding.

We can also specify padding for specific edges only. For example, we can indent a view by setting padding on the leading edge:

> Pretty-printed code from Indent Sample

```txt
Color.blue
    .padding(.leading, )
```

> Interactive example on HTML page: Indent Sample.

When we're proposing a [nil dimension](/layout/ideal-size) for a view, the padding amount is ignored when we propose to the padding's child. However, when the child reports its size, the padding value is added to the child's size.

> Pretty-printed code from Fixed Size Sample

```swift
Text("Hello World")
    .padding()
    .background(.teal)
    .fixedSize()
```

> Interactive example on HTML page: Fixed Size Sample.