Please refer to the Jam clip above for the first example. The second Jam clip at the end of the message is comparing webflow and bricks
Hi i have run into a problem when using margins in bricks. I have recorded a jam that illustrates my problem. When i apply a margin all round an inner element it pops out of the parent on the right hand side. How do i get it to respect the parent and apply the margin all round. In this case the blue block would be a complete border around the yellow block.
I created the instance of the margin issue above to check if it was isolated to my project but it happened in both instances.
Here is a Jam of the main build and where the issue is im having while creating a style guide. In webflow it works perfectly but in bricks the block jumps out on the right…Jam
Hi Gareth,
the block element has a width of 100% by default. Unlike padding, the margin is added on top of the 100%, creating the overflow.
You can set the width of the block to auto (as it probably is with Webflow) or use the div element instead if you want to use horizontal margins. In the flexbox context, however, I would rather advise column-gap.
Thank you for getting back to me Timmse it means alot,
I have tried that and the yellow block then shrinks down to the min height and width instead of extending across the parent. Jam
Im trying to get the yellow block to take up the blue block but with a margin around it. When i try use auto or change it to a div then it shrinks down to its min values Not sure what im doing wrong
With your original settings the outer block needs the flex-direction: row, so that it works with the margin. Either way, it doesn’t make sense to use margin from my point of view, because you could also just put padding on the outer block and achieve the desired result, right?
Not sure what im doing wrong