Like the previous properties we've discussed, we can also define a margin for

each side of a box.

And like the padding property, the margin property accepts percentage values or

any length values.

Now we already know about the clockwise, top-right, bottom-left order of values for

the padding and border shorthand property.

Now, the same order of values also applies to the margin property.

So let's go back to our wildlife rule, and

right beneath the border-top declaration, let's add a margin property.

And now we're gonna define all the margin values using the shorthand notation.

So if we write our margin value as 105 pixels followed by 0,

followed by 60 pixels and 0,

this is exactly the same as writing out the full declarations for

margin-top, margin-right, margin-bottom, and margin-left.

And I'm just pasting these in here as reference.

But I will comment them out so you can see what they are.

And remember, since the right and left margin values are the same,

they're both 0, we can simply define this as three values.

So, let's make the value 105, 0 and 60 pixels will omit

the fourth zero and now the first value applies to the top side only,

the second value applies to the right and

left sides of the div, and the third value applies to the bottom side only.

So when we save our stylesheet and refresh the page, now we're able to see that

105 pixels of margins above the div, and the 60 pixels of margin below.

And unlike padding, the margins create separation by pushing away from other

elements, so the margin is applied outside the border area.

And we're actually able to examine and

edit each element's box model parameters in our browser's developer tools.

So in the Chrome browser, if we click the top-right menu icon then

highlight More Tools and click Developer Tools,

notice how a panel opens up at the bottom of our browser window.

So in the top-left corner of the panel, we should see a magnifying glass icon.

When we click on it, it allows us to inspect the styles of any element.

So if we hover over and select the Wildlife div, we can

see all the CSS properties we gave it over here to the right in the styles panel.

So if we scroll down, we can see all the box model parameters for

the Wildlife div element.

So when we hover over the center, it highlights the content area and

there we see where the padding area starts and ends, same with the border areas and

the margins.

And we see the margin area outlined with orange.

So this is a perfect example of the box model at work.

Now in the teacher's notes, I'll provide more information and

related videos about the Chrome Developer Tools, if you wanna learn more.

Also Firefox, Safari, and IE have similar developer tools for

inspecting an element's styles and box model parameters.

So I'm gonna go ahead and close the panel for

now by clicking the close icon over here on the top-right corner of the panel.

So next, let's give our h2 and h3 elements a bottom

margin that gives them a little bit of separation from the content below.

This time we'll define the margins using M units.

So let's go back to our style sheet and let's scroll up to the h2 rule.

And let's add a margin properties, so

right below the line height declaration, let's type margin.

And we'd like to give our h2 a bottom margin, so let's make this margin-bottom,

and we want the bottom margin equivalent to about 26 pixels.

So we'll need to divide that desired margin of 26 pixels

by the pixel font size value of our heading two.

Remember, this M value is now equivalent to 53 pixels.

So if we divide 26 by 53, it gives us an M value of 0.5m.

So next step,

I'm gonna add a comment that will let us know what this value means in pixels.

So we're gonna type 26 pixels.

So if we save our stylesheet and go back to the browser and

refresh the page, there we see that margin sort of closed up a little bit.

It's now 26 pixels, which is exactly what we want for our h2.

So next, we're gonna do the same for our h3's bottom margin.

So in our h3 rule below that line height declaration, let's add a margin-bottom

property, and we'll want this bottom margin equivalent to 34 pixels and M's.

So again, we're gonna divide the desired 34 pixels

by the h3's pixel font size of 20 pixels.

So 34 divided by 20 gives us an M value of 1.7m.

And just like we did before,

let's add a comment that let's us know what this value means in pixels.

So let's type 34 pixels.

So now when we save our stylesheet and refresh the browser.

If we scroll down to our h2 we can see that .5m bottom

margin value equivalent to 26 pixels for our h2.

And right below that you can see that 1.7m bottom margin value

equivalent to 34 pixels in our heading threes.

And keep in mind that we're also able to use negative values in margins.

So back in our CSS, if we scroll back down to the bottom of the page and

find our wildlife rule, let's go to our margin shorthand declaration.

So let's go ahead and write, instead of 105 pixels,

let's write that says negative 50 pixels.

When we save our stylesheet and refresh the page,

notice how it pulls the div element up by 50 pixels.

So as we can see it's causing the elements above to sort of

overlap the box parameters of our Wildlife div.

So if we go back and remove that negative top value, I'll just undo it and

instead, we'll give our div a negative bottom margin.

So instead of 60 pixels let's say negative 60 pixels.

When we go back and refresh,

we can see how instead it pulls any succeeding element into the main element.

So that's why we're seeing the content of the bottom element overlapping the box

parameters of our Wildlife div.

Now in most cases, it's best to avoid using negative margin values for

layout, mainly because we're sort of pushing or pulling elements to and

from spaces they're not supposed to occupy by default, as we're seeing here.

But they do have their use.

So if you watch the first stage of the CSS layout techniques course you'll learn

how negative margins can be useful in certain cases.

Now in our case, let's set the margin value back to 105, 0, and 60.

[BLANK_AUDIO]

Finally, what we're gonna do next is center the primary and

secondary content divs on the page.

Now, I don't know about you, but I'm getting pretty tired of

seeing the main content over here to the left side of the page.

So let's center it in the browser.

We'll go back to our stylesheet and find the primary and

secondary content rule, right under the comment for layout styles.

And then let's add a margin property underneath the with declaration.

So when we use the value auto,

the browser automatically calculates the margins for each side.

And when it does that, all the margins are set to be equal.

So if we save our stylesheet, go back to the browser preview and refresh the page,

notice how it centers the div perfectly inside its available space.

So now there's equal margins on the left and right sides of the browser window.

Nice.

So next, we're gonna take a co-challenge where you'll write some of the padding,

border, and margin styles for parts of our Lake Tahoe website.

Be sure not to skip it.