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
Margin creates space outside a CSS box. It’s the space around the border. In this video, we’ll demonstrate the impact margin has on a CSS layout.
Further reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Like the previous box
properties we've discussed,
0:00
we can also define a margin
for each side of a box.
0:04
And, just like the padding
property, the margin
0:08
property accepts percentage
values or any length unit.
0:11
Once again, our margins can be
declared one side at a time.
0:17
And now we have 20 pixels
of margin on the top and
0:35
bottom and 5 pixels
on the right and left.
0:39
And once again, we can make
our code more efficient by using
0:44
the same shorthand
we've already learned.
0:48
In our previous video, we determined
the height of our header box to be
0:59
62 pixels. That's 18 pixels of content,
10 pixels of padding on both the top
1:05
and bottom, and 12 pixels of
border on the top and bottom.
1:12
And we learned how to use the browser
Inspector to make this calculation.
1:16
Now, here's an interesting question.
1:21
We've added 20 pixels of
margin to both the top and
1:24
bottom. How tall is
our header box now?
1:28
If you answered 62 pixels,
or even if you looked up
1:34
looked up the answer using the
browser Inspector, you're doing great.
1:39
Margin doesn't change
the measurement of our box.
1:42
Why not?
1:47
It's because margin is
the space outside the border.
1:48
Margin separates one rectangular
CSS box from another and
1:52
doesn't impact the measurement
of any element.
1:57
Now, here's a challenge.
2:03
What if I wanted my header to
touch the edges of the browser?
2:05
I could comment out
the declaration I've just written.
2:10
But that alone doesn't do it.
2:15
The issue is with my body element,
as my user agent stylesheet
2:18
provided 8 pixels of margin
around all four sides of my body.
2:23
If we erase that margin,
2:29
It looks like that
did too good of a job.
2:40
Now my header is flush with
the edges of my browser, which
2:44
looks pretty nice.
But unfortunately,
2:48
all the body copy that follows my
header also lost all that margin.
2:51
I could now apply margin to my
article, aside and footer elements,
2:58
and that would achieve
the look I'm going for.
3:03
That's not bad, except that
developers follow a programming
3:24
principle called DRY,
or don't repeat yourself.
3:27
The idea behind the
DRY principle is that
3:33
blocks of repeated
code are inefficient.
3:36
If I want to increase the margin to
12 pixels, I currently need to do so
3:39
in three separate CSS rules, which
is time-consuming and error-prone.
3:45
Fortunately, CSS allows you to
apply the same styles to multiple
3:52
selectors by separating
the selector names with commas.
3:57
Much better.
4:07
Now I can increase the margin by
editing one single declaration
4:08
rather than three separate ones.
4:13
So that's one solution to the problem
of having my header flush with
4:21
the viewport edges, but allowing
margin around the rest of my content.
4:26
I'm going to back up a few steps,
though, and try out an interesting
4:32
alternative solution using negative
values in margin declarations.
4:37
Just to illustrate how they work, I'm
going to pull up my article by 50 pixels.
4:43
And you can see my article and
header actually overlap now.
4:58
Because there's no longer zero
margin on top of my article, but
5:04
negative 50 pixels, which closed
up the space between these
5:09
two elements. I'll undo that,
and see if I can use
5:16
negative margins to solve
my design goals for my header.
5:23
Here I've declared negative 8
pixels of margin on the top,
5:39
right and left edges of my header.
5:44
Which has the effect of
erasing the 8 pixels of
5:48
margin applied to
the body element.
5:51
And I've made the
bottom margin 20 pixels,
5:54
since I don't want my article
coming too close to my header.
5:57
You probably won't use negative
margins a ton in your CSS layouts,
6:03
but it's good to be
aware of the option.
6:08
Do note that negative values only
work for margins in the box model.
6:12
There's no such thing as negative
padding or negative borders.
6:17
Before we wrap up this stage,
6:26
let's make a few adjustments to
the footer of Developer Diane's blog.
6:28
Here we've made our
footer 200 pixels wide,
7:03
rather than extending it all
the way across the screen.
7:07
We've adjusted
box model properties,
7:12
changed the color of the font,
shrunk the font size and
7:15
used the text-align property to center
the text within our footer box.
7:20
Let's check out the results
in the browser.
7:28
Now, that's a lot of
declarations in one rule.
7:35
How did I determine what
order to type them?
7:40
I've linked to a CSS Tricks
article in the Teacher's Notes
7:44
that polled over 10,000
developers on this question.
7:48
And you'll see that 39% responded
that they don't have a system and
7:53
they order the properties
randomly. That's because the
7:58
order of declarations within a
rule don't really matter,
8:03
except when you create a conflict
that gets settled by the cascade.
8:07
On the other hand,
45% grouped the CSS
8:13
properties by type,
as I've done here.
8:17
I've started with the box model,
working from the inside out,
8:22
width, then padding,
then border, then margin.
8:27
Next comes my
color declaration, and
8:31
finally the properties
that control text.
8:35
But I wouldn't stress out too much
over ordering properties just yet.
8:41
If you land a job as a developer,
you'll want to adjust to
8:48
to whatever system your company
uses to organize their CSS.
8:52
Now, what if we wanted to place
the footer's box in the center?
8:59
Text-align doesn't
accomplish this, but
9:04
the margin property has a special
value that can help us.
9:07
Notice that my margin is currently
set to 30 pixels 0 15 pixels.
9:12
Which means 30 pixels on the top,
no margin on the right or
9:19
left, and 15 pixels on the bottom.
9:24
Watch what happens when I change
that 0 to the auto keyword.
9:28
When we use the value auto,
9:36
the browser automatically calculates
the margins for each side.
9:38
When it does that,
the left and right margins
9:43
are set to be equal and
the box becomes centered.
9:47
You're probably wondering if
auto margins can be used to
9:52
vertically center content,
but the answer, sadly, is no.
9:56
Vertical centering is
a bit more complex and
10:01
requires methods
we haven't learned yet.
10:04
That concludes our introductory
look at the box model. In our
10:08
next stage, we'll take a look at some
advanced box model concepts.
10:12
Be sure to keep that
element Inspector open
10:18
as you check your
layouts in the browser.
10:20
It's the best way I know of to
grasp how the box model works.
10:23
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up