So I've got a page here and the container layout is column. Remember, my principle, 90, 95 % of the time, you should be using columns and rows. If you're using fixed layouts, you're creating a huge headache for yourself if you need your app to be responsive on different screen sizes.

When to use margins in Bubble

So my page is set as a column, and inside that I've got another group, I've given it a red border so it stands out, and I also have this as a column. So a good instance of where I might want to use a margin would be to say that I want my red group, red border group to be 20 pixels from the top. So I added 20 pixels there.

Let's preview it. Okay, and you can see that I've now got a 20 pixel gap. From the from the top. The key difference, and it has a roll on effect to how you arrange the elements on your page, is that margins apply to the outside of an element and padding applies to the inside. So let's put a group inside of my red boarded group. And I'm going to give this a background color so that it's very clear. I'll go green, so it stands out. And so let's say that I want my green to occupy the whole width of my red boarded group. So I go into layout, change the green groups layout to Row, for example. That gives me all of these extra options. And then I just set this to 100% because I want it always to take up the full width of the red boarded group. Now, what if I wanted to actually have a gap between the red board and the green on the left hand side? And this is why I've seen a lot of people doing it. And it's very apparent when you see me do it because I've got the contrasting colours of red and green.

When to us padding in Bubble

But often, well, let me show you. If I go on to my red group... No, green group. And I think, Right, yeah, I want, let's say, 40 pixels in from the left hand side. And so I add in 40. And then if I preview that, you'll see I get an overshoot on the right-hand side. Interestingly... Oh, it does. It does. I was about to say it doesn't show in the editor, but it does show. I overflow, it's the CSS term, onto the right-hand side. And that's because my green group is always going to have its width set to 100 % of the width of my red one. And so, like I say, it's very apparent when I use colours like this. But you won't believe the number of coaching apps that I've helped people on that I've worked with where they've got this overflow and they've just not realised that it's there and it's causing all sorts of UI elements issues with how they're trying to lay out their page. So the correct way to do this is not to apply a margin to the child element. So I'm going to get rid of the left hand margin there.

But is to apply a padding to the parent element. So I can say 40 % there. Okay, I'm not getting the overflow and I could even put 40 % on the 40 %, 40 % pixel s on the right-hand side. Let's preview that. So even though I've set this to 100 %, it's really 100 % of the usable space because the padding of the red border ordered group, and then 100 %, and then the padding there. And so there I'm not getting an overflow. So there's just a couple of ways. And I think it's a very easy mistake to make. You end up with the overflow especially when you're using 100 % width. But this is how I would go about building up my app, even if I'm building primarily for desktop. If I want it to work well, or I think maybe in the future, I want to add in tablet or mobile, then I would go build it using the principles that I've laid out in this video so that I don't just cause a massive headache for me later on. So remember, margins on the outside, paddings on the inside.