Padding & Margins

To create structure on your page, we use Padding & Margins, and this is available for all elements and containers like columns and rows. I'll select this text element, and from the Options Toolbar, you will see the settings over here. If you select that, you have the option to go to the styling. Opens up the right sidebar, and you can see at the top from the tab, Styling, Basic, and the first two options is padding and margins. Let's focus on padding first, and you can see that it is linked. You can put in pixels or in percentage. And by linking When you're using it, all sides introduce equal amounts of extra space between your content and the bounding box of the element, which is the text element in this case. Of course, you can unlink it and then control each one independently and build out the structure that is needed for your design. Let's link it again, reduce it a little bit, and talk about margins. Now, margins relate all to the positioning on the page, usually between different elements on the page But you can create nice effects like overlaps by using negative margins. When it comes to margins, we hardly ever link them.

We use them individually. So in this case, in the top margin, if I want to apply more space between the text element and the bounding box of the column, I can just increase it. And you can see that we add this space here. It goes up to 100 pixels, but you can click in there and add more by typing in a value which will easily give you the value that you want. On the other hand, if If we drag it to the left, we're going to get negative margins. And this is often used to create overlap effects. You can see here that we can easily do this and then go ahead and create nice layouts with this. This is available for all the elements as well as columns and rows. And what is very important to remember is that even when you've made this elaborate design here on your desktop, you have to go into tablet and mobile and style them out independently. This is the thing about responsiveness. So bring in some padding to make sure you've got some nice structure going on there and play around with that overlap effect that you want to create and go and do the same for mobile.