The margin property has multiple uses. In this video, look at how margin can be used to style elements in your page layouts.
- [Instructor] The margin property can also be used for more than just adding space. By default, elements stack on top of each other based on the order that the HTML is written in. You can use negative values to move the content outside of its stacking position. In this example if I used a negative value for my top and my left values, it'll actually just push the box outside of its normal stacking order. However, you do want to use this technique sparingly.
This is best used to nudge elements just outside of its position. If you find yourself using large values to move an element to a different position, it's probably better just to reorder the HTML instead. It's best practice to keep the page in its natural flow as much as possible. Margin can also be used to center-align block-level elements on the page. Use this technique to ensure the content blocks stay center-aligned no matter the size of the browser window.
First, a width needs to be set. Then, set the left and right values to auto. This auto value will make it automatically find the center of the page. The zero just refers to the top and bottom value, but you can set it to anything. Let's try this out in an example. First, I'll add the width back into this work example and run it. Then, I'll add the margin. Remember, the zero is just the top and bottom value. The auto is the left and right value, and this is how it will automatically find the center of the page.
Now even if I make the window smaller, it will always stay in the middle. The content block is now center-aligned, but there is a potential problem. In our projects, we set a different background color to each part of the page. If we add the width and the margin auto to the section header or footer element, the background color will no longer span all the way across. The reason for this is the width will be smaller than its container which is the browser window, so the color can't span all the way across.
To fix this, what we'll need to do is to create a container just for aligning the content. That way we can apply the background style to the whole section and center-align just the content. To do this, we'll need to create a container by adding a div around the content only. A div is used here because this element has no symantic meaning. It's being used as a hook just for styling purposes, so you'll also need to add a class to use as the selector. In this example, I've added a class of content wrap.
Then, we can apply the width and margin styles to the content wrap container instead. So let's go back to our previous example and try this out. In the HTML, let's go ahead and add our container div, so I'm going to add my opening div here and give it a class. I'll call it content wrap. Then, my closing div will actually be just before the closing section tag. I want to make sure that I'm wrapping just the content.
Then in my CSS, I can add my content wrap class here, and then move the width and the margin properties. I'm going to keep the background in the work section, because I want the whole area to still have that background color, but I want the content wrap to center align. And there you go. Now the background color continues to span across its container while the content stays centered in the middle.
Now you can also reuse this class to auto-align other parts of your page.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property