In this lesson, we’re going to be covering spacing including margins padding and the spacer element now design is always subjective, but one of the key things we can do is make sure that our design has plenty of negative or white space included to open up the design and make it easier to use and interact with. So let’s take a look at what elements Brizy gives us to do just that. So, first of all, let’s take a look at how we can access the padding and the margins there’s a couple of different ways. We can do that inside Brizy. One of the easiest methods to change your padding is to simply come over to any section go to the top and you can adjust your padding directly inside there by simply holding the mouse button down and drag in.

You can do exactly the same at the bottom, so if you come down to the bottom of the section and then you can adjust the padding directly inside there, this is a great visual way of working. But let’s just say you want to be just a little bit more precise and insert the values directly. We can do that by simply selecting the section and coming up to the top right hand, corner and opening up the options, we’ll click and open that up, and you see this now gives us all the options. If we click on the cog icon and choose more settings, this opens up the right hand panel, and now we can access the styling options inside there you can see we can access the padding and the margins. We can also set whether we want to apply to the left right top and bottom independently, or we want to link all those values together.

So, for example, you can see at the moment we’ve got these unlocked and we’ve got padding at the top and padding at the bottom. We can adjust those to get exactly the values you want. So, let’s say 180 pixels and we’ll do exactly the same on the bottom 180 pixels we’ve now set up our padding on the top and bottom independently. However, if you want to link these together, you can simply click the linked icon and now all four sides are linked together, so you can make changes to all the sides. At the same time, you can also do exactly the same with the margins.

We can lock those or unlock those and we can adjust them independently or dependently entirely up to you how you want to work, and you can see we get a visual representation on screen as we make those changes really quick and easy. So, let’s quickly reset those values: okay, so now there are going to be times where you’re, creating a design, and you just need to add just an extra little bit of space around the different elements. For example, if we take a look at this blue section, you can see we’re a little bit close to the top on the bottom. Let’s start by simply affecting the padding or margins on any of our different elements. So, for example, we have this text block, so we can do.

Is we can select this? We can simply come over, choose the cog icon and we can choose more settings once we do that. We can lock this in place to make it easier to keep this exactly where we need it, and now we can go ahead and adjust the padding or the margins around this particular item. So, for example, let’s take a look at the top. We add some extra space around there and we’ll do exactly the same at the bottom, and you can see that now opens up that extra space underneath a great, really simple way of doing it, and you can do exactly the same on this next text block.

We could do the same on there. We could adjust a little bit of space and padding margins, whatever you kind of want top bottom and we’ll do exactly the same on the final one, we’ll simply go ahead and just add a little bit of extra space at the bottom. So that’s a really quick and easy way of doing things. You can also go ahead and use the spacer element. So, let’s reset these values, let’s go to our elements.

Panel open this up and we’re going to do a search for spacer. So what we need to do now is position this, where we want so we’ll start off by adding one at the top of our section, and you can see that drops a spacer element inside there. We can select it, we can click on the little cog icon and we can adjust the height of this to get exactly what we want for our design. We can duplicate this or we can add a new space rinse, let’s just duplicate it, and we’re simply going to drag this one down and place this right at the bottom, and we now have plenty of space above and below and as a quick final note, when You’re working with spaces, if you want to do it more visually, so you don’t need to input any values. You can simply select your spacer and you’ll see you get this little blue dot. We can just click and drag and we can adjust the spacing all done visually. Very quick.