---
title: "padding"
description: "Apply additional space along each edge of the content in [Dp]: [start], [top], [end] and
[bottom]. The start and end edges will be determined by the current [LayoutDirection]. Padding is
applied before content measurement and takes precedence; content may only be as large as the
remaining space.

Negative padding is not permitted — it will cause [IllegalArgumentException]. See
[Modifier.offset]."
type: "modifier"
---

<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp) =
    this then
        PaddingElement(
            start = start,
            top = top,
            end = end,
            bottom = bottom,
            rtlAware = true,
            inspectorInfo = {
                name = "padding"
                properties["start"] = start
                properties["top"] = top
                properties["end"] = end
                properties["bottom"] = bottom
            },
        )
```


Apply additional space along each edge of the content in `Dp`: `start`, `top`, `end` and
`bottom`. The start and end edges will be determined by the current `LayoutDirection`. Padding is
applied before content measurement and takes precedence; content may only be as large as the
remaining space.

Negative padding is not permitted — it will cause `IllegalArgumentException`. See
`Modifier.offset`.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp) =
    this then
        PaddingElement(
            start = horizontal,
            top = vertical,
            end = horizontal,
            bottom = vertical,
            rtlAware = true,
            inspectorInfo = {
                name = "padding"
                properties["horizontal"] = horizontal
                properties["vertical"] = vertical
            },
        )
```


Apply `horizontal` dp space along the left and right edges of the content, and `vertical` dp
space along the top and bottom edges. Padding is applied before content measurement and takes
precedence; content may only be as large as the remaining space.

Negative padding is not permitted — it will cause `IllegalArgumentException`. See
`Modifier.offset`.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.padding(all: Dp) =
    this then
        PaddingElement(
            start = all,
            top = all,
            end = all,
            bottom = all,
            rtlAware = true,
            inspectorInfo = {
                name = "padding"
                value = all
            },
        )
```


Apply `all` dp of additional space along each edge of the content, left, top, right and bottom.
Padding is applied before content measurement and takes precedence; content may only be as large
as the remaining space.

Negative padding is not permitted — it will cause `IllegalArgumentException`. See
`Modifier.offset`.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.padding(paddingValues: PaddingValues) =
    this then
        PaddingValuesElement(
            paddingValues = paddingValues,
            inspectorInfo = {
                name = "padding"
                properties["paddingValues"] = paddingValues
            },
        )
```


Apply `PaddingValues` to the component as additional space along each edge of the content's left,
top, right and bottom. Padding is applied before content measurement and takes precedence;
content may only be as large as the remaining space.

Negative padding is not permitted — it will cause `IllegalArgumentException`. See
`Modifier.offset`.



## Code Examples
### PaddingAllModifier
```kotlin
@Composable
fun PaddingAllModifier() {
    Box(Modifier.background(color = Color.Gray)) {
        Box(Modifier.padding(all = 20.dp).size(50.dp).background(Color.Blue))
    }
}
```
### PaddingModifier
```kotlin
@Composable
fun PaddingModifier() {
    Box(Modifier.background(color = Color.Gray)) {
        Box(
            Modifier.padding(start = 20.dp, top = 30.dp, end = 20.dp, bottom = 30.dp)
                .size(50.dp)
                .background(Color.Blue)
        )
    }
}
```
### PaddingValuesModifier
```kotlin
@Composable
fun PaddingValuesModifier() {
    val innerPadding = PaddingValues(top = 10.dp, start = 15.dp)
    Box(Modifier.background(color = Color.Gray)) {
        Box(Modifier.padding(innerPadding).size(50.dp).background(Color.Blue))
    }
}
```
### SymmetricPaddingModifier
```kotlin
@Composable
fun SymmetricPaddingModifier() {
    Box(Modifier.background(color = Color.Gray)) {
        Box(
            Modifier.padding(horizontal = 20.dp, vertical = 30.dp)
                .size(50.dp)
                .background(Color.Blue)
        )
    }
}
```