1
00:00:00,260 --> 00:00:04,339
Like the previous box
properties we've discussed,

2
00:00:04,339 --> 00:00:08,062
we can also define a margin 
for each side of a box.

3
00:00:08,062 --> 00:00:11,892
And, just like the padding 
property, the margin 

4
00:00:11,892 --> 00:00:15,800
property accepts percentage 
values or any length unit.

5
00:00:17,580 --> 00:00:22,199
Once again, our margins can be
declared one side at a time.

6
00:00:35,628 --> 00:00:39,543
And now we have 20 pixels
of margin on the top and

7
00:00:39,543 --> 00:00:44,486
bottom and 5 pixels 
on the right and left.

8
00:00:44,486 --> 00:00:48,429
And once again, we can make 
our code more efficient by using 

9
00:00:48,429 --> 00:00:52,129
the same shorthand 
we've already learned.

10
00:00:59,469 --> 00:01:05,367
In our previous video, we determined
the height of our header box to be 

11
00:01:05,367 --> 00:01:12,115
62 pixels. That's 18 pixels of content,
10 pixels of padding on both the top

12
00:01:12,115 --> 00:01:16,579
and bottom, and 12 pixels of 
border on the top and bottom.

13
00:01:16,579 --> 00:01:21,019
And we learned how to use the browser
Inspector to make this calculation.

14
00:01:21,019 --> 00:01:24,520
Now, here's an interesting question.

15
00:01:24,520 --> 00:01:28,120
We've added 20 pixels of
margin to both the top and

16
00:01:28,120 --> 00:01:32,327
bottom. How tall is 
our header box now?

17
00:01:34,824 --> 00:01:39,051
If you answered 62 pixels, 
or even if you looked up

18
00:01:39,051 --> 00:01:42,910
looked up the answer using the 
browser Inspector, you're doing great.

19
00:01:42,910 --> 00:01:47,245
Margin doesn't change
the measurement of our box.

20
00:01:47,245 --> 00:01:48,460
Why not?

21
00:01:48,460 --> 00:01:51,630
It's because margin is
the space outside the border.

22
00:01:52,640 --> 00:01:57,003
Margin separates one rectangular
CSS box from another and

23
00:01:57,003 --> 00:02:00,750
doesn't impact the measurement
of any element.

24
00:02:03,330 --> 00:02:05,850
Now, here's a challenge.

25
00:02:05,850 --> 00:02:09,250
What if I wanted my header to
touch the edges of the browser?

26
00:02:10,280 --> 00:02:13,400
I could comment out
the declaration I've just written.

27
00:02:15,610 --> 00:02:17,020
But that alone doesn't do it.

28
00:02:18,110 --> 00:02:23,037
The issue is with my body element,
as my user agent stylesheet

29
00:02:23,037 --> 00:02:27,980
provided 8 pixels of margin
around all four sides of my body.

30
00:02:29,230 --> 00:02:30,811
If we erase that margin,

31
00:02:40,884 --> 00:02:44,610
It looks like that 
did too good of a job.

32
00:02:44,610 --> 00:02:48,832
Now my header is flush with 
the edges of my browser, which 

33
00:02:48,832 --> 00:02:51,460
looks pretty nice.
But unfortunately,

34
00:02:51,460 --> 00:02:56,530
all the body copy that follows my
header also lost all that margin.

35
00:02:58,580 --> 00:03:03,386
I could now apply margin to my 
article, aside and footer elements,

36
00:03:03,386 --> 00:03:06,775
and that would achieve
the look I'm going for.

37
00:03:24,045 --> 00:03:27,322
That's not bad, except that 
developers follow a programming 

38
00:03:27,322 --> 00:03:33,333
principle called DRY, 
or don't repeat yourself.

39
00:03:33,333 --> 00:03:36,666
The idea behind the 
DRY principle is that

40
00:03:36,666 --> 00:03:39,976
blocks of repeated 
code are inefficient.

41
00:03:39,976 --> 00:03:45,524
If I want to increase the margin to
12 pixels, I currently need to do so

42
00:03:45,524 --> 00:03:51,450
in three separate CSS rules, which 
is time-consuming and error-prone.

43
00:03:52,960 --> 00:03:57,802
Fortunately, CSS allows you to
apply the same styles to multiple

44
00:03:57,802 --> 00:04:02,126
selectors by separating
the selector names with commas.

45
00:04:07,155 --> 00:04:08,710
Much better.

46
00:04:08,710 --> 00:04:13,381
Now I can increase the margin by
editing one single declaration

47
00:04:13,381 --> 00:04:15,948
rather than three separate ones.

48
00:04:21,563 --> 00:04:26,266
So that's one solution to the problem
of having my header flush with

49
00:04:26,266 --> 00:04:31,310
the viewport edges, but allowing
margin around the rest of my content.

50
00:04:32,430 --> 00:04:37,279
I'm going to back up a few steps,
though, and try out an interesting

51
00:04:37,279 --> 00:04:43,190
alternative solution using negative
values in margin declarations.

52
00:04:43,190 --> 00:04:50,431
Just to illustrate how they work, I'm
going to pull up my article by 50 pixels.

53
00:04:58,594 --> 00:05:04,725
And you can see my article and
header actually overlap now.

54
00:05:04,725 --> 00:05:09,788
Because there's no longer zero
margin on top of my article, but

55
00:05:09,788 --> 00:05:16,000
negative 50 pixels, which closed 
up the space between these

56
00:05:16,000 --> 00:05:23,441
 two elements. I'll undo that, 
and see if I can use

57
00:05:23,441 --> 00:05:28,178
negative margins to solve 
my design goals for my header.

58
00:05:39,868 --> 00:05:44,715
Here I've declared negative 8
pixels of margin on the top,

59
00:05:44,715 --> 00:05:48,280
right and left edges of my header.

60
00:05:48,280 --> 00:05:51,997
Which has the effect of
erasing the 8 pixels of

61
00:05:51,997 --> 00:05:54,960
margin applied to 
the body element.

62
00:05:54,960 --> 00:05:57,975
And I've made the 
bottom margin 20 pixels,

63
00:05:57,975 --> 00:06:01,930
since I don't want my article
coming too close to my header.

64
00:06:03,620 --> 00:06:08,461
You probably won't use negative
margins a ton in your CSS layouts,

65
00:06:08,461 --> 00:06:10,970
but it's good to be 
aware of the option.

66
00:06:12,030 --> 00:06:17,600
Do note that negative values only 
work for margins in the box model.

67
00:06:17,600 --> 00:06:22,310
There's no such thing as negative
padding or negative borders.

68
00:06:26,057 --> 00:06:28,282
Before we wrap up this stage,

69
00:06:28,282 --> 00:06:33,716
let's make a few adjustments to
the footer of Developer Diane's blog.

70
00:07:03,985 --> 00:07:07,277
Here we've made our
footer 200 pixels wide,

71
00:07:07,277 --> 00:07:11,060
rather than extending it all
the way across the screen.

72
00:07:12,260 --> 00:07:15,885
We've adjusted 
box model properties,

73
00:07:15,885 --> 00:07:20,788
changed the color of the font,
shrunk the font size and

74
00:07:20,788 --> 00:07:27,090
used the text-align property to center
the text within our footer box.

75
00:07:28,510 --> 00:07:31,004
Let's check out the results
in the browser.

76
00:07:35,987 --> 00:07:40,040
Now, that's a lot of
declarations in one rule.

77
00:07:40,040 --> 00:07:43,060
How did I determine what
order to type them?

78
00:07:44,420 --> 00:07:48,458
I've linked to a CSS Tricks
article in the Teacher's Notes

79
00:07:48,458 --> 00:07:53,440
that polled over 10,000
developers on this question.

80
00:07:53,440 --> 00:07:58,540
And you'll see that 39% responded
that they don't have a system and

81
00:07:58,540 --> 00:08:03,180
they order the properties 
randomly. That's because the 

82
00:08:03,180 --> 00:08:07,326
order of declarations within a 
rule don't really matter,

83
00:08:07,326 --> 00:08:11,720
except when you create a conflict
that gets settled by the cascade.

84
00:08:13,280 --> 00:08:17,715
On the other hand, 
45% grouped the CSS

85
00:08:17,715 --> 00:08:22,159
properties by type, 
as I've done here.

86
00:08:22,159 --> 00:08:27,505
I've started with the box model,
working from the inside out,

87
00:08:27,505 --> 00:08:31,869
width, then padding,
then border, then margin.

88
00:08:31,869 --> 00:08:35,606
Next comes my 
color declaration, and

89
00:08:35,606 --> 00:08:39,940
finally the properties 
that control text.

90
00:08:41,660 --> 00:08:46,940
But I wouldn't stress out too much
over ordering properties just yet.

91
00:08:48,070 --> 00:08:52,398
If you land a job as a developer,
you'll want to adjust to

92
00:08:52,398 --> 00:08:56,450
to whatever system your company 
uses to organize their CSS.

93
00:08:59,347 --> 00:09:03,290
Now, what if we wanted to place
the footer's box in the center?

94
00:09:04,310 --> 00:09:07,063
Text-align doesn't 
accomplish this, but

95
00:09:07,063 --> 00:09:10,740
the margin property has a special
value that can help us.

96
00:09:12,780 --> 00:09:19,260
Notice that my margin is currently
set to 30 pixels 0 15 pixels.

97
00:09:19,260 --> 00:09:24,010
Which means 30 pixels on the top,
no margin on the right or

98
00:09:24,010 --> 00:09:27,050
left, and 15 pixels on the bottom.

99
00:09:28,560 --> 00:09:32,492
Watch what happens when I change
that 0 to the auto keyword.

100
00:09:36,148 --> 00:09:38,004
When we use the value auto,

101
00:09:38,004 --> 00:09:42,540
the browser automatically calculates
the margins for each side.

102
00:09:43,660 --> 00:09:47,086
When it does that, 
the left and right margins

103
00:09:47,086 --> 00:09:50,560
are set to be equal and
the box becomes centered.

104
00:09:52,540 --> 00:09:56,578
You're probably wondering if 
auto margins can be used to 

105
00:09:56,578 --> 00:10:01,790
vertically center content,
but the answer, sadly, is no.

106
00:10:01,790 --> 00:10:04,480
Vertical centering is
a bit more complex and

107
00:10:04,480 --> 00:10:07,180
requires methods 
we haven't learned yet.

108
00:10:08,580 --> 00:10:12,770
That concludes our introductory
look at the box model. In our 

109
00:10:12,770 --> 00:10:18,010
next stage, we'll take a look at some 
advanced box model concepts.

110
00:10:18,010 --> 00:10:20,150
Be sure to keep that 
element Inspector open

111
00:10:20,150 --> 00:10:23,800
as you check your 
layouts in the browser.

112
00:10:23,800 --> 00:10:27,560
It's the best way I know of to
grasp how the box model works.