Understanding Margins and Padding in Bubble
Should I use margins or should I use padding? In this Bubble tutorial, I'm going to give a few examples because this is a common theme that I see in the Bubble coaching that we run at Planet No Code, where we do one-to-one sessions helping Bubble creators just like yourself develop and overcome issues that they've got with their Bubble apps. We experience this quite a lot with, I say clunky layouts.
Setting Up the Page Layout
I've got a page here and the container layout is column. Remember, my principle, 90, 95 percent 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. 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.
Using Margins for Spacing
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. I add in 20 pixels there, let's preview it. You can see that I've now got 20 pixel gap from the top.
The Key Difference Between Margins and Padding
The key difference, but 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.
Using Padding for Internal Spacing
Let's put a group inside of my red-boarded group. I'm going to give this a background color so that it's very clear. I'll go green so it stands out. Let's say that I want my green to occupy the whole width of my red-boarded group. I go into layout, change the green groups, layouts to row for example, that gives me all of these extra options. Then I just set this to 100 percent, because I want to always to take up the full width of the red-boarded group.
Common Mistakes with Margins and Padding
Now, what if I wanted to actually have a gap between the red border and the green on the left-hand side? This is where I've seen a lot of people doing it. It's very apparent when you see me do it because I've got the contrasting colors of red and green. But let me show you. If I go onto my red group, no, green group. I think, right, yeah, I want let's say 40 pixels in from the left-hand side. So I add in 40. Then if I preview that.
Invitation to Explore More Content
Hey guys, if you're finding this YouTube tutorials helpful, we invite you to explore even more content on our website at planetnocode.com. We have a large selection and variety of super in-depth and detailed video lessons created and curated just for our pain members. It's all about learning together and accelerating your no-code journey. Check us out at www.planetnocode.com and let's continue building without limits.
Understanding Overflow Issues
You'll see I get an overshoot on the right-hand side. Interestingly, oh, it does. I was about to say it doesn't show in the editor, but it does show. I overflow, is the CSS term, onto the right-hand side. That's because my green group is always going to have its width set to 100% of the width of my red one.
Correct Way to Apply Spacing
Like I said, it's very apparent when I use colors 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 just not realized 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 it's to apply a padding to the parent element.
Applying Padding to Parent Elements
So I can say 40% there. And okay, I'm not getting the overflow and I could even put 40% on the 40%, 40 pixels 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-boarded group and then 100% and then the padding there. And so there I'm not getting an overflow.
Best Practices for Building Responsive Apps
So there's just a couple of ways and I think it's 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 will 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.
Key Takeaways
So remember, margin's on the outside, padding's on the inside.