Haven't used compose heavily, but watching <@UK5SVA94Z> video from today. You can have a padding mo...

# compose

[Colton Idle]

Haven't used compose heavily, but watching @nickbutcher video from today.

You can have a padding modifier, then a background, then padding in order to "simulate" margin. Does that mean margin is non-existent anymore?

[George Mount]

Yes, there is no special case for "margin." Padding is space that is around something, so you can use padding to give you margin.

[George Mount]

Unlike Android Views, padding isn't a property, so you can add it wherever you like to give you something that acts like an Android margin or something that acts like an Android padding.

[Colton Idle]

Interesting... this reminds me of a twitter/blog post I read somewhere saying that margin is bad. Now I have to try to dig it up and re-read. 😄

[Colton Idle]

I think this was the article? https://mxstbr.com/thoughts/margin

[Colton Idle]

The article actually favors spacers. Not that this is directly tied to compose, but curious about hearing @nickbutcher @cb thoughts?

[Javier]

I think @Leland Richardson [G] had some article or he commented it in a video, or even here in this channel

[romainguy]

it depends why you are using padding/margin

[romainguy]

if it’s to separate elements in a column, I agree that spacers are better

[romainguy]

in Nick’s example from the screenshot above, padding is the right semantic

[Leland Richardson [G]]

Max’s post is pretty relevant when it comes to the design decisions we made. Modifiers are designed so that they don’t break encapsulation. everything “below” that modifier is set in stone, modifiers allow you to change “above” it.

This is why the pattern I showed in my video released today is a reasonable thing to do. In your composable, on the root node, instead of doing

@Composable fun MyComponent() { 
  SomeLayout(Modifier.foo(..).bar(…)) { ... } 
}

You are able to do

@Composable fun MyComponent(modifier: Modifier = Modifier) {
  SomeLayout(modifier.foo(..).bar(..)) { ... } 
}

without breaking encapsulation

[Leland Richardson [G]]

this allows for the padding modifier to be a spacing primitive, as well as serve as the way to do “padding” in the CSS sense

[Colton Idle]

@Leland Richardson [G] awesome. Thanks for the insight.

"as well as serve as the way to do "padding" in the CSS sense" I don't do too much web dev, can you explain the relation to CSS here? Doesn't css have a similar box model to android xml where you have padding and margin?

[Leland Richardson [G]]

i guess its not specific to web really. what i mean is like “internal padding”, so in the “padding vs margin” semantic, padding is part of the component itself. and if you had a border, background, width, etc, padding would be included in that. padding in compose can be used as an implementation detail of a composable, and used “below” a border or background modifier for instance, and it behaves exactly this way. Or it can be used outside of the implementation by it being passed in as a modifier parameter and used as the start of the modifier chain. In this case it will behave more closely to what we would think of as “margin”

[Colton Idle]

Thanks for clarifying!

[Leland Richardson [G]]

np!