How compose box model works? for eg in `Surface(` `modifier = modifier + LayoutPaddi...

# compose

[Kazemihabib1996]

How compose box model works?
for eg in
Surface(
modifier = modifier + LayoutPadding (
left = 8.dp,
top = 8.dp,
right = 8.dp,
bottom = 0.dp
),

color = Color.Green
) {
Container(width = 10.dp, height = 10.dp, padding = EdgeInsets(all = 10.dp)) {}
}

The green colors not paints on the paddings neither padding of Suface, neither Container.
I tested with dev05.

[Zach Klippenstein (he/him) [MOD]]

I believe LayoutPadding is similar to the concept of “margins” in the traditional android ui framework. It tells the parent how to layout the child to which the modifier is applied.

So in this case the parent of your Surface would be making the surface 16 dp smaller than it would otherwise be, and the green color is only being painted inside those bounds.

[Kazemihabib1996]

Thank you, and what about padding=EdgeInsets() in Container, is it also similar to "margins"?

[Zach Klippenstein (he/him) [MOD]]

(in general, modifiers with the prefix Layout* seem to be intended to communicate something to the parent layout)

[Zach Klippenstein (he/him) [MOD]]

I believe the padding parameter is actual padding for that layout’s children (so it would be like traditional Android “padding”)

[Kazemihabib1996]

👍thanks, I got it now