Transcript
In this Quick Tip, we're going to learn about a new property for container elements in the new responsive engine called "padding". Padding adds space and pixels between the contents of a container and its border. This is different from "margin." Margin adds space in pixels from the border of the element to the next element. Both are similar properties to help us design better apps.
Let's take a look at how padding works with a real example. Imagine a pricing table with three card elements. Before, we'd have to add margin to each individual element to give it space between its border and the next element. With padding, we no longer have to do that! Instead, we can select the card group itself and add padding to each side we want. And just like that, our card design has some inner space!
Now that this group has padding around each side, we would only need to utilize top or bottom margin to push each individual element away from one another. Or, if we wanted to keep this control on the container, we can add gap spacing between elements to get the same effect. Using margin, padding, and gap spacing in tandem like this is key for future designs.
A couple things to keep in mind:
You can use padding conditionally for when you're looking to change your design on different screen sizes.
Repeating groups don't have padding as a property. This means that for repeating groups, you would only see padding for the group content within each cell, or if the repeating group itself was in a container that had it.
Keep in mind: padding is available on some other elements in the Styles tab. At some point this may be overhauled to match what we have with containers.
Padding offers so much more design flexibility, and used together with margin and our other new responsive properties, you'll find they're a great addition to creating your design.
That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.