How to account for margins in width calculations?

Is there a way to make margins factor into width calculations, or is it only possible to do this with nested padding?

With margins:

With nested padding:

Not a killer limitation, just extremely annoying/counterintuitive

Seems to work with “auto size” – not sure what that does

Hi, I’m not really sure I follow the examples you are showing, do you have a link to a project where and can describe what’s the issue that’s confusing? In general, heading is about interior spacing and margin is about exterior spacing, so with and heights are not supposed to include margin, but you might be referring to a specific situation in your screenshots

Yeah happy to link a project

But inside normal flexbox, if I apply margin to a flexbox child with align-self stretch

The child’s area – including margins – will be exactly as wide as the flex parent

Inside plasmic, the child’s area including margins is wider than the flex parent which is slightly confusing

The only way to work around this seems to be to wrap the child in a div with padding

Thanks for elaborating, I get what you’re saying - yes is because width:stretch translates into (roughly) width:100%, which doesn’t account for margin in flex containers (you can try this in CSS as well)

You can make items stretch excluding margin by ignoring (unsetting) the width setting (so it’s no longer setting width:100%) and dropping down to specifying things the way you would in CSS:

• Set align-self:stretch on the child, or
• Set align-items:stretch on the parent (causes everything to stretch)

Let me know if that makes sense

(You won’t need to switch to padding, though that’s certainly another solution)

Yes, this was caused by UI confusion

I wasn’t aware that the icons referred to flex props

Thought it was text align for some reason