Padding & Vertical Stacking

In this video, we're going to discuss the best practice of vertically stacking elements.

Vertical stacking is precisely what it sounds like. We wanna stack our elements right on top of each other so that the bottom of one element is touching the top of your next element. We do this for two reasons.

Firstly, it leaves less room for error when a browser interprets our page. Your page is more likely to be displayed exactly as you want it when you vertically stack your boxes.

Secondly, it'll help us keep our spacing and layouts consistent over multiple pages and will save you as the builder time in the long run.

Important for vertical stacking is padding. So we'll start by explaining what padding is and how to use it. Then we'll demonstrate how to vertically stack the elements on a page.

So what exactly is padding? Padding is when we tell the browser that we want some space inside of a border. For example, I have my box here and I'm going to tell rather than I want some space between this box and anything that's in it. So we'll click on this box. We'll go to element style and we'll go down to border padding and corners. As we see this outer option is to add a border around this box, but we'll add padding. So it's this inner element. When I have this selected, this is gonna add padding around every side of this box.

But let's say I just wanna create some space between this element and the top of the box. In this case, I'm only gonna add top padding. And as we can see, it has changed to padding top. And let's say I want two REMs between my first element in the top of the box. There we go. And the padding is shown by this blue shading.

Now, anything inside the box will not start until two REMs from the top. Next I wanna add padding to our learn more button. So I'll select and go back to element styles. Important to note here is that since this button has a style applied to it, when I add padding, it will add padding to all other elements with that style.

Padding is part of the element style. And this is one reason padding is great to keep your elements consistent across different pages.

So as we can see at the moment, our learn more button is right up against the text box. So we'll add maybe some padding on the top to give it some breathing room and we'll add some on the bottom as well.  

As you can see, when I add padding to the bottom, it increased the space between the text and the bottom border. This is because there is a bottom border already applied of one pixel. You can see adding padding increased the space between the bottom border and the text. And this is a great way you can mess around with your spacing and make things exactly how you want to be using padding.

Now it's time to make sure that all of our elements are vertically stacked. So we'll want either way with padding or with spacing for the elements to be directly on top of one another.

First we'll start by having our containing box completely against the top of the page then I'll drag my text up to right below my title. Now, this might be a little tight. So I can add padding to my title. I'll add padding the bottom, and this will give padding below the title to keep some space between the title and the text. I'll adjust as needed. And the learn more button is already vertically stacked. But let's say this was down a little bit further and I wanted to make sure that was vertically stacked.

I can drag up or I can go down to distance Y at the bottom, which is distance from pushing element and change this number to zero. And that will assure that there is zero distance between this element and an element above it. 

Lastly, we also want a vertically stack between large elements. So let's say I want to stack this picture up to this box of text. So let's first make sure that I always have one REM of space between this box and the image. I'm gonna do that by adding padding bottom to the containing box.

I'll add one REM of padding on the bottom. Now we can see that it appeared with the blue shading.The next thing I'm gonna do is change the minimum height. This is gonna ensure that the containing box only fits to however much is inside of it, taking away any extra whitespace that might appear especially on mobile and tablet versions.

Next thing, I can click on picture and change its distance Y to zero. As you can see now, there's one REM of space between the box and picture and everything is stacked very nice and vertically with padding.

So now that you've learned how to pad and vertically stack your elements, try to keep these best practices in mind when you start building your next page, not only will it save you time and increase consistency across pages, but it will also improve how your layouts look on the browser.