2.4 Spacing CSS
With your element sizing and alignment all sorted out, now it’s time to learn how to add spacing to your elements via the
padding properties. We’ll also cover using borders, and the incredibly useful
2.4 Spacing CSS
Hi, welcome back to Start Here-Learn CSS layout. In this lesson, you're gonna learn all about spacing in CSS and we're gonna start with the demo of how the margin and padding properties work. So here we have three divs, each one is nested inside the other. And in the inspector, we can see that the parent div has a background color of green, the middle div has a background color of blue, and the child div has a background color of red. And right now we can only see the child-div because all of our divs are the exact same size. So what we're gonna do is modify the margin and the padding of the middle div to allow us to see all three of these divs. Margin and padding are the two properties that you'll use most frequently when you're controlling the spacing in your layouts. A margin effects the spacing around the outside of an element and padding effects the spacing around the inside of an element. So the first thing that we're gonna do is set the margins on our middle_div to create some space around its outside. So inside our middle_div, we'll add the property margin, and we'll set it to 1rem. Right, so now that we have some space around the outside of the middle_div, we can see our parent_div. However we still can't see the blue color of the middle_div itself because the child div that's sitting inside it is still obscuring it. So now let's add some spacing around the inside of our middle-div and we'll do that by adding the property padding and we'll also give that a value of 1rem. So there we go. Now we have some spacing around the inside of our middle div as well, allowing us to see all three of our divs. And in the inspector, if you click on the middle div, you'll see in the little representation of the layout down in the right corner here, it shows that we have a margin around the outside and padding around the inside. And when you just use the straight margin or padding property, the value that you provide will be set on all sides of that element. However, you can set sides one at a time, and that's done by appending hyphen top, hyphen right, hyphen bottom, or hyphen left. So let's change our .middle_div so we only have a margin at the top. So there we go, all the other margins have disappeared, and we only have a margin at the top here, and we can do the same thing with our padding. Let's change this so we only have padding on the left side. So now we only have this space on the left side of our div. Now as well as appending hyphen and then the side that you want to target, you can also use shorthand and put a different size margin on every side of your element. So I'll show you what I mean. Here I'm gonna put in four numbers 1rem, 2rem, 3rem and 4rem. And now you can see we have a different amount of spacing on every side of our element. So the way to remember how the shorthand works is it starts at the top and it goes clockwise. So in this example, our padding is 1rem at the top, 2rem on the right, 3rem on the bottom and 4rem on the side. And you can use this same shorthand with margins as well. And then the last type of shorthand, which you've already seen a couple of times is we use two numbers. And in this case, the first number will be your spacing at the top and bottom and the second number will be your spacing at the right and left sides. All right, so that covers how to work with margins and padding. Now let's take that and apply it to our design. Okay, so the first thing that you can see is problematic in our design right now is that there's no spacing on either side of our columns. So there's no spacing on the left side, on the right side, or in the middle in between the two columns, so let's fix that. The first thing that we're gonna do is add padding around the left and right sides, and incidentally, also above and below our content by adding padding to our wrapper. So as you'll, recall that will add spacing to the inside. So, in our wrapper class, we'll add the padding property and we'll set it to 5rem. All right, so that's a good amount of spacing on the left side and also on the right side. Now let's add some spacing in between the columns too. And we're gonna do that by adding some padding to the left side of our second column. So in our col_02 class, we're gonna add padding left and we're also going to set that to 5rem. All right, so now we do have 5rem of padding on the left side of our second column and I can show you that in the inspector. So there is our padding showing up, however, as you can see, we've got a pretty significant problem. Our right column has just been pushed down below the left column and our whole site is now too wide. We now need to scroll left and right just to see everything and the reason for that is something called the box model. The box model controls how the overall width of an element is calculated. Now by default, a browser will take the width that you have specified for an item and it will add the amounts of the padding that you specify on top of it. So our site here is already specified to be 100% width and right now the browser is taking our padding and it's adding it on top of that and obviously that's not what we want. So what we gonna do is switch the box model so that rather than our padding being added on to our 100% width, it's just factored into it. So, first up in our wrapper, we're gonna add the property box sizing. And the default value that's automatically applied to box sizing of any element is content box, and that's what's causing the problems that we have here. So we're gonna change that to boarder-box. Then we're gonna take this same code, and we're gonna put it down in our second column as well. So there we go, instantly everything now fits back into our full width, but we have a nice amount of spacing either side of the columns and in between them. And the next thing that needs spacing is our logo, which is a little too close to the top and also our footer. Before we do that though, we're gonna add a border that's gonna go all the way around our wrapper. That's partly for decorative purposes and also partly to help separate visually between our wrapper div and the header and footer. So to add a border in, the first thing that we're gonna do is add the property border style and we're gonna set that to solid. And there we go, that instantly adds a border around our box. And this is one property that's essential if you want to make a border show up somewhere in your site. And now we also wanna set that to a width that's gonna suit our design. So now, add boarder-width, and we'll set that to a value of 0.187rem. Now, that's just the equivalent to a three pixel with border, but we're using rem for the same reason that we went through in the first video in this course. And that is that if somebody bumps up or shrinks the size of their text, the borders are also going to increase or decrease in size so they don't look out of place. So now that our board is in, we can see a bit more clearly how the spacing in the header and in the footer should be modified. So up in our header and footer here, we're gonna add some padding and we'll set that to 2rem. All right, so now that's a much more natural looking amount of space in both the header and the footer. Now there's something else that you'll also notice doesn't look quite right and that is that there's some unwanted space down the left side and the right side of our border around our wrapper. And that is because, by default, the browser will add some spacing into your document. So if we check out the body element, you can see that it has 8 pixels of margin added. And that's gonna be the case in any fresh HTML document that you create, and something that you're always gonna have to override if you don't want it there. So we're gonna go up into our body styling, and we're just gonna set the margin to 0. And there we go, and now that's corrected that issue. And now there's just one last thing that we wanna set out with the layout and that is to put a frame around our image here, it's looking a little plain. So we're gonna change that up a little bit. Now in the HTML that you're working with, we already have a class name applied to the image and that is image frame. So now we'll set up a style in our CSS for it. And what we're gonna do is add a border around the outside of the image and some padding. So we'll put some space around the image, creating a frame effect. And because we're adding padding and we've already set the width of this image to a maximum of 100%, we're also gonna set the box sizing for this element to border box. So I'll just copy and paste to make things a little quicker. Now we're gonna add some padding and we'll set that to 0.75 rem. And then we're gonna add the same border that we applied to the outside of our wrapper. All right, so now we've created a nice frame effect for our image. And the only thing that doesn't look quite right now in our layout is that we have quite a bit of space above the heading. You remember from our typography course, that we add a margin above and below our headings. But as we already have some spacing inside our wrapper, that makes a little bit too much space. So what we're gonna do is target the first element that appears inside our left column and we're gonna get rid of its top margin. So the way that we do that is by creating a new style. First, we're gonna specify the class of the first column, then we're gonna add a greater than sign. And this tells the browser to target only children of this column. Then we're gonna use a different kind of selector called the first child selector. So we'll add a colon and then we'll add first-child, and that is gonna tell the browser to target only the first child inside the left column. Now we'll set its top margin to 0. All right, so now our heading lines up nicely with the top of our image. And the same thing would apply if you had a paragraph at the top of this column instead. Whatever was added first in this left column, will have its top margin trimmed off so everything lines up nicely. So now, everything is looking nicely spaced down. We've got a good amount of spacing in our header. Our columns are all nicely spaced out, our image is looking just right and so is our footer. And on top of that, we've overridden the default spacing that was putting gaps on the left and right side of our wrapper. So now you've almost fully completed your layout stage. The only thing left to fix is the fact that this is not yet responsive. I'm sure that you will have noticed that as we've had the browser squished over on the right side of the screen, everything looks pretty awful. And that's something that we need to fix. And so far we've been working with our site at its maximum width. And as you start reading up on web design, you'll find that there's some debate of whether you should start a design at its smallest possible width, which is often thought of as being a mobile first design because mobile devices often have smaller screens. Or its largest size first which is sometimes referred to as a desktop first approach because desktops usually have larger screens. And what we're doing is not really either. Now I'll just zoom out again to show you what I'm talking about. With our site, we've started working at this width because, this is the maximum width we ever want our site to get to. If this site is any wider, it will become too difficult to read the content in our columns. So starting at this width, not because we're specifically trying to create a desktop suitable layer, but because we're trying to establish both ends of the spectrum that our layout needs to suit. So now we have our largest width and we also know that our smallest width is just the smallest width that we can crunch a browser window down to. So now that we have both of those extremes, all we need to do is make sure that the layout still looks good everywhere in between those two points. And that's what we'll be doing in the next lesson. You'll learn how to create a smoothly adjusting design that adapts itself to look good at any size view port. We'll be doing that with media queries as well as a few little extra tweaks. So I'll see you in the next lesson.