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