Should I use margins or padding?
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. And we experience this quite a lot with, I say, clunky layouts.
Margins vs Padding: Discover the secret to responsive layouts in Bubble!
Clunky Layouts, Begone: Learn how to create smooth, professional designs with this simple trick.
Master Container Layouts: Unlock the power of columns and rows for flawless UI design in your Bubble app.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.