Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Margins affect the area outside a box. We commonly use margin properties to create space around elements.
Related Videos
Quick Reference
The same order of padding shorthand values applies to the margin
property.
.wildlife {
margin: 105px 0 60px 0;
}
This is exactly the same as writing out the full margin declarations:
.wildlife {
margin-top: 105px;
margin-right: 0;
margin-bottom: 60px;
margin-left: 0;
}
Tools
-
0:00
Like the previous properties we've discussed, we can also define a margin for
-
0:04
each side of a box.
-
0:06
And like the padding property, the margin property accepts percentage values or
-
0:10
any length values.
-
0:12
Now we already know about the clockwise, top-right, bottom-left order of values for
-
0:17
the padding and border shorthand property.
-
0:20
Now, the same order of values also applies to the margin property.
-
0:24
So let's go back to our wildlife rule, and
-
0:28
right beneath the border-top declaration, let's add a margin property.
-
0:33
And now we're gonna define all the margin values using the shorthand notation.
-
0:38
So if we write our margin value as 105 pixels followed by 0,
-
0:43
followed by 60 pixels and 0,
-
0:46
this is exactly the same as writing out the full declarations for
-
0:52
margin-top, margin-right, margin-bottom, and margin-left.
-
0:58
And I'm just pasting these in here as reference.
-
1:01
But I will comment them out so you can see what they are.
-
1:07
And remember, since the right and left margin values are the same,
-
1:11
they're both 0, we can simply define this as three values.
-
1:16
So, let's make the value 105, 0 and 60 pixels will omit
-
1:21
the fourth zero and now the first value applies to the top side only,
-
1:26
the second value applies to the right and
-
1:29
left sides of the div, and the third value applies to the bottom side only.
-
1:33
So when we save our stylesheet and refresh the page, now we're able to see that
-
1:39
105 pixels of margins above the div, and the 60 pixels of margin below.
-
1:46
And unlike padding, the margins create separation by pushing away from other
-
1:51
elements, so the margin is applied outside the border area.
-
1:55
And we're actually able to examine and
-
1:58
edit each element's box model parameters in our browser's developer tools.
-
2:02
So in the Chrome browser, if we click the top-right menu icon then
-
2:08
highlight More Tools and click Developer Tools,
-
2:13
notice how a panel opens up at the bottom of our browser window.
-
2:17
So in the top-left corner of the panel, we should see a magnifying glass icon.
-
2:22
When we click on it, it allows us to inspect the styles of any element.
-
2:26
So if we hover over and select the Wildlife div, we can
-
2:31
see all the CSS properties we gave it over here to the right in the styles panel.
-
2:36
So if we scroll down, we can see all the box model parameters for
-
2:39
the Wildlife div element.
-
2:41
So when we hover over the center, it highlights the content area and
-
2:46
there we see where the padding area starts and ends, same with the border areas and
-
2:52
the margins.
-
2:54
And we see the margin area outlined with orange.
-
2:57
So this is a perfect example of the box model at work.
-
3:01
Now in the teacher's notes, I'll provide more information and
-
3:04
related videos about the Chrome Developer Tools, if you wanna learn more.
-
3:07
Also Firefox, Safari, and IE have similar developer tools for
-
3:12
inspecting an element's styles and box model parameters.
-
3:15
So I'm gonna go ahead and close the panel for
-
3:16
now by clicking the close icon over here on the top-right corner of the panel.
-
3:22
So next, let's give our h2 and h3 elements a bottom
-
3:27
margin that gives them a little bit of separation from the content below.
-
3:32
This time we'll define the margins using M units.
-
3:35
So let's go back to our style sheet and let's scroll up to the h2 rule.
-
3:40
And let's add a margin properties, so
-
3:42
right below the line height declaration, let's type margin.
-
3:46
And we'd like to give our h2 a bottom margin, so let's make this margin-bottom,
-
3:53
and we want the bottom margin equivalent to about 26 pixels.
-
3:58
So we'll need to divide that desired margin of 26 pixels
-
4:03
by the pixel font size value of our heading two.
-
4:06
Remember, this M value is now equivalent to 53 pixels.
-
4:11
So if we divide 26 by 53, it gives us an M value of 0.5m.
-
4:19
So next step,
-
4:20
I'm gonna add a comment that will let us know what this value means in pixels.
-
4:25
So we're gonna type 26 pixels.
-
4:29
So if we save our stylesheet and go back to the browser and
-
4:32
refresh the page, there we see that margin sort of closed up a little bit.
-
4:36
It's now 26 pixels, which is exactly what we want for our h2.
-
4:42
So next, we're gonna do the same for our h3's bottom margin.
-
4:46
So in our h3 rule below that line height declaration, let's add a margin-bottom
-
4:53
property, and we'll want this bottom margin equivalent to 34 pixels and M's.
-
4:58
So again, we're gonna divide the desired 34 pixels
-
5:03
by the h3's pixel font size of 20 pixels.
-
5:06
So 34 divided by 20 gives us an M value of 1.7m.
-
5:12
And just like we did before,
-
5:14
let's add a comment that let's us know what this value means in pixels.
-
5:19
So let's type 34 pixels.
-
5:20
So now when we save our stylesheet and refresh the browser.
-
5:24
If we scroll down to our h2 we can see that .5m bottom
-
5:29
margin value equivalent to 26 pixels for our h2.
-
5:33
And right below that you can see that 1.7m bottom margin value
-
5:37
equivalent to 34 pixels in our heading threes.
-
5:41
And keep in mind that we're also able to use negative values in margins.
-
5:46
So back in our CSS, if we scroll back down to the bottom of the page and
-
5:51
find our wildlife rule, let's go to our margin shorthand declaration.
-
5:57
So let's go ahead and write, instead of 105 pixels,
-
6:01
let's write that says negative 50 pixels.
-
6:05
When we save our stylesheet and refresh the page,
-
6:09
notice how it pulls the div element up by 50 pixels.
-
6:13
So as we can see it's causing the elements above to sort of
-
6:16
overlap the box parameters of our Wildlife div.
-
6:20
So if we go back and remove that negative top value, I'll just undo it and
-
6:24
instead, we'll give our div a negative bottom margin.
-
6:28
So instead of 60 pixels let's say negative 60 pixels.
-
6:32
When we go back and refresh,
-
6:34
we can see how instead it pulls any succeeding element into the main element.
-
6:39
So that's why we're seeing the content of the bottom element overlapping the box
-
6:43
parameters of our Wildlife div.
-
6:47
Now in most cases, it's best to avoid using negative margin values for
-
6:51
layout, mainly because we're sort of pushing or pulling elements to and
-
6:55
from spaces they're not supposed to occupy by default, as we're seeing here.
-
6:59
But they do have their use.
-
7:01
So if you watch the first stage of the CSS layout techniques course you'll learn
-
7:05
how negative margins can be useful in certain cases.
-
7:08
Now in our case, let's set the margin value back to 105, 0, and 60.
-
7:14
[BLANK_AUDIO]
-
7:22
Finally, what we're gonna do next is center the primary and
-
7:25
secondary content divs on the page.
-
7:28
Now, I don't know about you, but I'm getting pretty tired of
-
7:30
seeing the main content over here to the left side of the page.
-
7:34
So let's center it in the browser.
-
7:38
We'll go back to our stylesheet and find the primary and
-
7:41
secondary content rule, right under the comment for layout styles.
-
7:46
And then let's add a margin property underneath the with declaration.
-
7:52
So when we use the value auto,
-
7:54
the browser automatically calculates the margins for each side.
-
7:58
And when it does that, all the margins are set to be equal.
-
8:02
So if we save our stylesheet, go back to the browser preview and refresh the page,
-
8:08
notice how it centers the div perfectly inside its available space.
-
8:12
So now there's equal margins on the left and right sides of the browser window.
-
8:18
Nice.
-
8:19
So next, we're gonna take a co-challenge where you'll write some of the padding,
-
8:23
border, and margin styles for parts of our Lake Tahoe website.
-
8:26
Be sure not to skip it.
You need to sign up for Treehouse in order to download course files.
Sign up