This exercise incorporates the margin and padding property into the course project.
- [Instructor] In this exercise, we'll be addressing the spacing issues between and within the sections. The areas where the background colors haven't expanded indicate that the spacing is likely coming from margin rather than padding, since margin represents the area around the element. If it was padding, the background color would have expanded to include it. The space at the top of the header is likely coming from this H1 heading. In the space between the header and the projects, it might be a little bit hard to see on this screen since I have a pretty light background color, but there is this little space in between and this is likely coming from the bottom of this paragraph and the top of this heading. To get rid of this space we could remove the margins from those elements. There's no need to add this to your projects just yet, I just want to demonstrate why we don't want to do this. So back in my editor, I had already put in this code so I'm just going to uncomment it so I can demonstrate, and here's how it looks in the browser. So, setting the margin to zero for these elements removed the space between the sections. But the content is now right up to the edge of the section and the elements within the sections don't have any space in between them either so everything looks a little squished. So sometimes it's better to leave the default space or at least not completely remove it. So in this case, instead of removing margins from each of these specific elements, let's add padding to the container instead to the content-wrap. So I'm going to go back to my editor and delete this, we won't be needing this. And instead, I'm going to add 60 pixels of padding to the top and bottom of the content-wrap, and I only want to add it to the top and bottom, so I'm going to put zero as my second value which is the left and right value. Save the file and go back to the browser and refresh. So by adding space inside of the container itself, it pushed all the content inward including the margin space of the elements. Let's open the browser tools to see which space is padding and which is margin. If we look at the content-wrap in the header we can see, here's the margin space, the left and the right from adding the margin auto, and here is the padding space at the top. So if I inspect this H1 we can see that the margin space in the H1 is still there, but it's just been pushed inside of the container. Padding space at the top, margin space around the H1. Now all the elements using the content-wrap class will also be updated with the padding style. Though we added the same amount of padding at the top and bottom of the content-wrapper, there may be a small difference in the amount of space depending on what html takes are included. So for example, in the project section the amount of space at the top is bigger than the space at the bottom. If I inspect the heading, I can see that the default margin, as well as the padding was added to the content-wrap. Here's the padding space which we can see as the purple color, and then there's the margin space coming from the header which we see as yellow. If we scroll down to the button at the bottom and inspect that, I can use this icon here to specifically select this element, we could see that the button actually overlaps into the padding space at the bottom of the content-wrap area. There's also no additional margin space in the button the same way as in the heading and that's why the space looks smaller. So to make the content-wrapper padding space look more consistent all the way around, let's start by removing the margin from the H2 heading. So, I'm going to add the H2 style before the content-wrap. I like to put all my type selectors before my class selectors, and then set the margin to zero to remove the space, and now let's go back to the browser and check for the update. Here's how it looks before I made the change, I'm going to refresh the browser to see the change and now we've removed that extra space. So, I've set the margin to zero which removed the margin space from all sides of the heading, but the space here is coming from the paragraphs. So that's enough space between these two lines of text. We can inspect the area again, just to make sure that we did remove it and here we can see that the H2 no longer has any margin. Now, for the button at the bottom to get this button to not overlap into the padding area we'll have to use the display property. So, let's go back to our CSS file and scroll down to the button, the projects button selector. Remember, inline elements don't align vertically when you add padding and margin to it. So, we can change this behavior by adding display inline-block to the button. Let's save that, and we'll go back to the browser and refresh. So it's a very small change. You may not have been able to see it, but if we hover over the content-wrap we can now see that the button is inside of that padding space. So now the space between the bottom and the top should look a little bit more consistent. Many html elements have default padding and margin styles. So some people prefer starting with a clean slate by adding what is referred to as a reset style sheet to remove the spaces as well as other default styles. Personally, I like to put in my own default styles. Also, when you're learning, I think it's good to see what the default styles look like, so you know how to deal with them. But, using the reset is pretty common among many developers. And so, if you'd like to know more about the pros and cons, and how to use a reset style sheet, check out cssreset.com.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts