Compose Modifier

padding

Apply additional space along each edge of the content in [Dp]: [start], [top], [end] and [bottom].

PaddingAllModifier

@Composable
fun PaddingAllModifier() {
    Box(Modifier.background(color = Color.Gray)) {
        Box(Modifier.padding(all = 20.dp).size(50.dp).background(Color.Blue))
    }
}

PaddingModifier

@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

@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

@Composable
fun SymmetricPaddingModifier() {
    Box(Modifier.background(color = Color.Gray)) {
        Box(
            Modifier.padding(horizontal = 20.dp, vertical = 30.dp)
                .size(50.dp)
                .background(Color.Blue)
        )
    }
}