Practicing with padding and spacing

- [Instructor] In this exercise, we'll start with adjusting the default space between the sections. None of the background colors have expanded to enclose this space, so it must be coming from the margin rather than the padding, since it represents the area around an element. Since there's a space between the header and this Work Experience section, it's likely coming from the bottom of this paragraph and the top of this header. If we look between the Work section and the Education section, there's also a space there.

So, again, it's probably coming from the header and the paragraph as well. The same for the footer and the Education section. So what we could do, to get rid of this space, is to remove the margin from these elements. But the problem is, the content within the sections will be too close to the edge of its container. Let me just demonstrate. I'm going to go back to my CSS file, and select my heading and my paragraph, and set the margin to zero, to remove the space. Now if I go back to my project, we can see that while the space has been removed, it's been removed from all of it.

So now the content is too close to the edge, as well as being too close to the content within the container itself. So sometimes it's good to leave some of that default space, or at least not completely remove it. Now in this scenario, instead of removing margins from each of these specific elements, I'll add padding instead to the containers, the content wrap. So by adding spacing inside the container itself what it will do is push all of the content inward and away from the edges.

Let's go back to the CSS file. I'm going to delete this, and go back to my content wrap and add some padding. I'm going to go with one value, 50 pixels, and that's going to add 50 pixels all around to the top, right, bottom, and left edge. Let's save and refresh it, and there you go. By adding padding to the content wrap, all the page sections using this class will have the same amount of padding. And this will help to keep your designs more consistent.

Now you may notice that while we added the same amount of padding around the entire content wrapper, there's a small difference in the amount of space between the top of the wrapper and the bottom. And that's because there is margin around this heading element right here. I don't mind leaving the margin at the bottom of this header, because I want to keep this space between the header and the content that follows. But I do want to remove this margin at the top, so that the wrapper padding is more consistent.

Let's go ahead and add that, so that we can see the difference. So back in our CSS file, find your h2 selector, and we're going to set the margin-top to zero. And that's going to remove the margin space, just from the top of the element. Save it, refresh it, check it in the browser. So, it was a small change, but we did remove the space here, so now the spacing is more consistent at the top, and at the bottom.

Next, let's address this white border around the entire page. You could see it here on the left, on the bottom, the right side, and the top. Just like the spacing between the sections, this is coming from the default margin as well, but from the body element, and that's why it's wrapping the entire page. So let's go ahead and remove that. Back in your CSS file, find your body selector and set the margin to zero. And when you use zero as a value, you don't have to add any measurement units.

Save it and refresh it. Now the white space is gone and the background colors span all the way across. It doesn't span across to here, because that is the scroll bar area, and that's actually not part of the browser view port. So let's go back to the footer. We should probably add some space in between these links. Also, longer blocks of text are usually easier to read when it's left align, but since there's not much content here, let's also center align the text.

Back in our CSS file, let's go down to the footer section. Now I'm just going to add a little extra comment here. So, this block is where I've been adding all of my header and footer styles. But this block right here is just my header styles. So I'm going to put a little comment here, kind of like a sub-comment, just to organize it a little bit further. So there's my header styles, and here are my footer styles. And I'll continue to put any shared header and footer styles right here.

OK, so the first thing we're going to do, center align the text. Use footer as your selector, text-align: center. Save it, and refresh your browser. By adding text-align center to the footer, all of the child elements within have inherited the style. So next step, let's put some spacing around these links. For the most part, unless you have a background style, margin and padding basically look the same when it's applied to an element, because they both add space.

When deciding to use margin or padding, I usually ask myself, am I trying to add space inside of an element to push the content away from the edge of its container? If that's the case, use padding. Or, am I trying to add space around the element to push other elements away from it? If that's what you're trying to do, then use margin. So for now, why don't we put some temporary background color behind the links, just so that we can see the difference between padding and margin.

Back in our HTML file, to make sure that we add the styles only to the links within this footer, we're going to add a class to this div that's containing all the links. I'm going to give it a class of contact-info. And back in the CSS file, I'm going to create a new declaration block, and name it .contact-info to select the class, and I'm also going to apply these styles to the link, so I'm going to use a descendant selector, and add the a to target the links inside of the contact-info class.

And my temporary background color is going to be white. And while we're here, let's add some margin, so that we can see how the spacing will work out. I'm going to go with 10 pixels. Save it, and refresh your browser. So, as you can see, by adding margin we were able to add some spacing in between the links, so that they're not so close to each other. With links, when you hover over them the icon turns into a pointer icon, just to indicate to the user that this is a clickable area.

And once you go off the clickable area, it turns back to the pointer icon. Let's change the margin to padding, just to see the difference. Back in the browser, refresh it. So now that we've added padding, the background color has expanded, because padding adds space within the element, and also increases its size. So, in the case of links, when you hover over it the padding area also becomes part of the clickable area.

This is a better user experience, because it gives the person a wider area to click on. This will also make it easier for people to tap on the link with their finger, if viewing the webpage on a touch device. So there's one more thing we should do to ensure the padding has been added properly. Links are inline elements by default, and that's how they display on a line. But remember, padding and margin only align horizontally for inline elements. This might be kind of hard to see right now, because we've only added 10 pixels of space, so I'm just going to change it to a larger amount, just to demonstrate what I mean.

So I'm going to go back to the padding and just change it to 40. So, as you can see, it added the padding, but it's not aligning in all directions, so it's actually overlapping some of the content. So, to fix that, we can use the display property. Let's go back to the CSS. I'm going to choose the value of inline-block, because I still want these elements to align side by side, in a line, but I also wanted to apply the padding properly, like block level elements.

So I'm going to save that, and refresh it. And now you can see that it's no longer overlapping the content. So, you can take this time to adjust the spacing in your project to whatever amount looks good to you. I'm going to remove my temporary background color and just set it back to 10 pixels. Feel free to keep experimenting. And once you're finished with that, you're ready to go on to the next exercise.