1
00:00:00,000 --> 00:00:02,497
You know how we made something that

2
00:00:02,538 --> 00:00:04,578
looked like a box in the last

3
00:00:04,591 --> 00:00:06,832
talk-through by making this `div` and then

4
00:00:06,909 --> 00:00:08,352
giving it a `background-color`?

5
00:00:08,352 --> 00:00:10,855
Well, actually, every element on your

6
00:00:10,865 --> 00:00:12,728
webpage is considered a box

7
00:00:12,728 --> 00:00:15,148
by the browser, whether or not it looks

8
00:00:15,149 --> 00:00:18,348
like a box to you. This heading is a box..

9
00:00:18,348 --> 00:00:22,128
this paragraph is a box..even this `span`

10
00:00:22,128 --> 00:00:25,178
that we made is a box. Some of the boxes

11
00:00:25,178 --> 00:00:29,688
are big, some are small, some are in line

12
00:00:29,688 --> 00:00:32,838
like the `span`, some are block, like the

13
00:00:32,838 --> 00:00:35,708
`div`. But they're all considered boxes.

14
00:00:35,708 --> 00:00:38,764
Why does this matter? 'Cause there's

15
00:00:38,764 --> 00:00:41,054
something called the "box model," which

16
00:00:41,080 --> 00:00:44,100
you can see in the diagram I just

17
00:00:44,100 --> 00:00:46,030
pasted in. Every element's box has four

18
00:00:46,033 --> 00:00:48,513
parts: the actual content, the padding,

19
00:00:48,517 --> 00:00:52,357
the border, and the margin. We can use CSS

20
00:00:52,357 --> 00:00:54,437
to modify the padding, border, and margin.

21
00:00:54,437 --> 00:00:56,507
So you'll understand soon what those

22
00:00:56,507 --> 00:00:59,177
really are. Let's start with the margin.

23
00:00:59,177 --> 00:01:01,657
That's the transparent area around the box

24
00:01:01,672 --> 00:01:03,822
that separates the box from other

25
00:01:03,822 --> 00:01:06,742
elements. We'll specify margin using our

26
00:01:06,749 --> 00:01:10,169
favorite unit: pixels. To add 15 pixels

27
00:01:10,169 --> 00:01:12,799
of margin on every side of the official

28
00:01:12,799 --> 00:01:16,799
info box, we can just write: `margin:

29
00:01:16,854 --> 00:01:22,284
15px;`. So, you see the change that made?

30
00:01:22,307 --> 00:01:25,027
What if we want a different amount of

31
00:01:25,027 --> 00:01:27,237
margin on each side? Like more on the

32
00:01:27,237 --> 00:01:29,647
top-bottom than the left-right? We can

33
00:01:29,647 --> 00:01:31,567
write those amounts in clockwise order,

34
00:01:31,643 --> 00:01:36,603
starting from the top. So top 15px, right

35
00:01:36,603 --> 00:01:43,983
0px, bottom 10px, left 6px. OR, we could

36
00:01:43,983 --> 00:01:46,363
use specific properties for each side, but

37
00:01:46,363 --> 00:01:48,813
we only wanna specify a few sides. Like if

38
00:01:48,813 --> 00:01:51,063
we want to have some space around the cat

39
00:01:51,080 --> 00:01:56,750
picture, on the right..and then, we also

40
00:01:56,762 --> 00:02:01,302
just want some on the bottom...and we're

41
00:02:01,302 --> 00:02:03,792
happy to have the default margin for the

42
00:02:03,792 --> 00:02:06,742
other sides. There's also a special value

43
00:02:06,742 --> 00:02:08,642
for margin that'll help us do something

44
00:02:08,644 --> 00:02:11,004
fancy with our pages. To show you that,

45
00:02:11,004 --> 00:02:14,234
I'm gonna add a `div` around the entire

46
00:02:14,234 --> 00:02:17,464
page. I'll give it an ID of "container."

47
00:02:17,464 --> 00:02:21,394
Let's put this ta-a-a-ag here, so it

48
00:02:21,394 --> 00:02:25,954
contains everything. Now, gonna add a rule

49
00:02:25,954 --> 00:02:29,374
for that `div` to give it a width of 400

50
00:02:29,374 --> 00:02:33,814
px, and I wanna center it on the page. I

51
00:02:33,814 --> 00:02:37,744
COULD specify a `margin-left: 100px;`,

52
00:02:37,744 --> 00:02:40,754
because that looks centered to me, but it

53
00:02:40,754 --> 00:02:42,584
may not be centered to you, because your

54
00:02:42,594 --> 00:02:45,074
browser may be bigger or smaller. What we

55
00:02:45,079 --> 00:02:46,779
want is to be able to say, "give it

56
00:02:46,861 --> 00:02:49,281
however much margin it needs so that it's

57
00:02:49,281 --> 00:02:52,821
got equal margin on both sides." That is

58
00:02:52,821 --> 00:02:56,341
exactly what `margin: auto;` does. And

59
00:02:56,341 --> 00:02:57,841
it's a great way to center `div`s on a

60
00:02:57,841 --> 00:03:01,471
page. Now that we've centered that `div`,

61
00:03:01,472 --> 00:03:04,012
we might wanna make it even more distinct

62
00:03:04,024 --> 00:03:06,304
by adding a border around the edge of it

63
00:03:06,333 --> 00:03:10,333
using the CSS border property. Let's add a

64
00:03:10,363 --> 00:03:13,483
red border to that `div`. We type

65
00:03:13,483 --> 00:03:15,283
"border:," and then we just need to

66
00:03:15,283 --> 00:03:16,943
specify three aspects of the border:

67
00:03:16,943 --> 00:03:19,783
thickness, style, and color. For a thin

68
00:03:19,783 --> 00:03:23,473
border, I'll just type "1px," uh, for a

69
00:03:23,473 --> 00:03:25,633
solid line, nothing fancy, we'll just

70
00:03:25,639 --> 00:03:28,969
type "solid," and...to make it red I'll

71
00:03:28,969 --> 00:03:31,649
just pop up my R G B color picker and pick

72
00:03:31,649 --> 00:03:37,769
a nice...fiery red. Okay. Just like with

73
00:03:37,769 --> 00:03:39,919
margin, we can specify the border for

74
00:03:39,919 --> 00:03:42,789
just, like, one side. Like if we want a

75
00:03:42,798 --> 00:03:46,078
REALLY thick purple border on the top,

76
00:03:46,078 --> 00:03:49,238
we'll add another property. "border-top:

77
00:03:49,248 --> 00:03:56,538
10px solid purple;." Cool! Now, let's add

78
00:03:56,545 --> 00:03:59,785
a frame to the image. and play around with

79
00:03:59,785 --> 00:04:02,225
border styles. So going up to our

80
00:04:02,225 --> 00:04:07,605
"cute-cat," uh, let's see, "border: 6px,"

81
00:04:07,605 --> 00:04:12,985
let's try "groove red." Okay. Now I don't

82
00:04:12,985 --> 00:04:16,405
like groove, let's try "double?" Eh, let's

83
00:04:16,405 --> 00:04:19,185
try "ridge." Ah-ha! Now that looks like a

84
00:04:19,185 --> 00:04:22,665
frame. Now how about a border around our

85
00:04:22,665 --> 00:04:25,985
official info? Uh, let's see, "border:,"

86
00:04:25,985 --> 00:04:28,405
let's not make it too big, "2px," let's

87
00:04:28,405 --> 00:04:31,185
try "dotted" and then, uh, let's pick an,

88
00:04:31,200 --> 00:04:35,960
uh, just a subtle gray, uh, lemme try

89
00:04:35,960 --> 00:04:38,230
"dashed" instead. Okay, that - that's what

90
00:04:38,238 --> 00:04:40,958
I want. Now with all these borders,

91
00:04:40,958 --> 00:04:42,438
something is bothering me a little.

92
00:04:42,438 --> 00:04:45,018
Actually, something is bothering me a LOT.

93
00:04:45,018 --> 00:04:48,878
See how the text is butting up next to the

94
00:04:48,878 --> 00:04:51,628
border in the "container?" And - and

95
00:04:51,628 --> 00:04:53,438
butting against the text in the official

96
00:04:53,438 --> 00:04:56,518
info? That's so gross-looking, and it

97
00:04:56,518 --> 00:04:59,738
makes it harder to read the text. THAT is

98
00:04:59,738 --> 00:05:02,198
where padding comes in. Whenever your

99
00:05:02,198 --> 00:05:03,778
elements have `background-color`s or

100
00:05:03,778 --> 00:05:05,392
`border`s, you almost ALWAYS want to add

101
00:05:05,392 --> 00:05:07,632
padding, to put a bit of space between the

102
00:05:07,632 --> 00:05:10,092
contents and the edges. Let's add some

103
00:05:10,106 --> 00:05:13,296
padding to the "container," just...let's

104
00:05:13,315 --> 00:05:17,985
do 15px all around the container. Oh. So

105
00:05:17,991 --> 00:05:21,241
much better. Uh, let's add...let's add

106
00:05:21,241 --> 00:05:23,371
some padding to our official info, let's

107
00:05:23,372 --> 00:05:27,882
see: "padding: 6px," oh, beautiful. Now,

108
00:05:27,882 --> 00:05:29,362
we don't need to add padding to the image,

109
00:05:29,363 --> 00:05:31,003
since images actually look good inside

110
00:05:31,012 --> 00:05:33,852
frames like that. And there you have it:

111
00:05:33,852 --> 00:05:36,182
the box model. Margin, border, and

112
00:05:36,182 --> 00:05:38,362
padding. I used big values and bright

113
00:05:38,362 --> 00:05:40,392
colors to show them off to you, but my

114
00:05:40,392 --> 00:05:42,942
page DOES look a bit cheesy now. If you

115
00:05:42,960 --> 00:05:44,270
want your page to look sleek and

116
00:05:44,270 --> 00:05:46,690
sophisticated, try using more subtle

117
00:05:46,690 --> 00:05:49,120
whites and grays. Whatever you do, make

118
00:05:49,120 --> 00:05:50,870
sure you use these properties, because

119
00:05:50,870 --> 00:05:52,710
they'll have a big effect on how your page

120
00:05:52,000 --> 00:05:53,720
looks and feels.