0
1
00:00:00,770 --> 00:00:10,020
Now we've seen before that every single HTML element on screen is just treated as a box by our
1

2
00:00:10,030 --> 00:00:17,360
CSS, and by styling that box, by changing its height, its width, its margin, its padding,
2

3
00:00:17,360 --> 00:00:23,990
that’s how we can determine how our elements can be laid out and how it will show up on screen.
3

4
00:00:24,200 --> 00:00:32,390
So for example if we specified a CSS rule that targeted all the images on this I Love Bacon web site
4

5
00:00:32,690 --> 00:00:36,110
to say that it should have a width of 100 percent,
5

6
00:00:36,110 --> 00:00:42,990
all that’s going to do is it's going to change the width of that box to 100 percent,
6

7
00:00:43,040 --> 00:00:51,630
and in the process scales up our image so that it expands to fill the entire width of our screen.
7

8
00:00:51,800 --> 00:00:58,040
And this concept in CSS is lovingly known as the box model. To explain this,
8

9
00:00:58,100 --> 00:01:02,330
let’s take a simple div that we've given a background color to.
9

10
00:01:02,750 --> 00:01:08,870
And let's say that this div has a height of 300 pixels and a width of 300 pixels to begin with.
10

11
00:01:08,870 --> 00:01:17,200
Now if I change the height to 600 pixels then that div will expand vertically pushing down any other
11

12
00:01:17,240 --> 00:01:21,500
divs or any other content that's not inside this current container.
12

13
00:01:21,500 --> 00:01:26,080
Now I can also do the same with the width and make it much wider,
13

14
00:01:26,180 --> 00:01:31,070
so that anything that used to be on the right of this current box would get pushed out of the way.
14

15
00:01:31,070 --> 00:01:36,510
Now you've seen that we can specify these values either as static pixels,
15

16
00:01:36,530 --> 00:01:40,190
so for example here, or we can use percentages.
16

17
00:01:40,190 --> 00:01:47,550
For example I can say that the width should be 100 percent and that refers to 100 percent of the viewport.
17

18
00:01:47,600 --> 00:01:51,710
Now the viewport is just the screen that you're viewing the web site on.
18

19
00:01:51,710 --> 00:01:58,280
So that could be a laptop screen or your mobile screen or your iPad screen, but this will expand to 100
19

20
00:01:58,310 --> 00:02:01,010
percent of whatever that screen size may be.
20

21
00:02:01,160 --> 00:02:02,940
Now here's where it gets interesting.
21

22
00:02:03,020 --> 00:02:09,820
In addition to the width and the height of an element you can also specify that it should have a border
22

23
00:02:09,890 --> 00:02:11,120
or not.
23

24
00:02:11,120 --> 00:02:18,280
Now if you say that the border is going to be a solid border using CSS, then you will see a default 3
24

25
00:02:18,290 --> 00:02:21,180
pixel border show up around your element.
25

26
00:02:22,840 --> 00:02:27,090
Now remember that this border doesn't encroach on the size of your element.
26

27
00:02:27,100 --> 00:02:36,280
So if it's 300 pixels by 300 pixels, that blue area is still going to be 300 by 300, but you can expand
27

28
00:02:36,310 --> 00:02:44,110
the border size to say that the border width should be 50 pixels all round, so that’s 50 pixels on every
28

29
00:02:44,110 --> 00:02:45,400
single side.
29

30
00:02:45,430 --> 00:02:53,170
So now the width of this entire element is actually much wider because in addition to 300 pixels width for
30

31
00:02:53,410 --> 00:02:54,580
the original element,
31

32
00:02:54,670 --> 00:02:56,350
so that's the blue part,
32

33
00:02:56,350 --> 00:03:03,900
we’ve now also got a 50 pixel border on each side, and the entire thing now takes up 400 pixels.
33

34
00:03:03,970 --> 00:03:12,970
Now instead of specifying a border width for all four sides, you can override that border by saying specifically
34

35
00:03:13,030 --> 00:03:17,110
that the border top should only have 0 pixels.
35

36
00:03:17,110 --> 00:03:20,410
Alternatively you can use the circle shorthand.
36

37
00:03:20,440 --> 00:03:24,640
So it means that we're going around in a circle starting from the top.
37

38
00:03:24,910 --> 00:03:31,400
So the border width starting at the top is going to have 0 pixels at the top, 10 pixels at the right,
38

39
00:03:31,480 --> 00:03:36,360
20 pixels on the bottom and 30 pixels on the left.
39

40
00:03:36,570 --> 00:03:44,610
And as you go clockwise you give your element dimensions that you specify for all four sides and there's
40

41
00:03:44,670 --> 00:03:49,590
other variations around this theme as well which you'll find in the documentation.
41

42
00:03:49,590 --> 00:03:51,810
Now let's take this one step further.
42

43
00:03:52,110 --> 00:03:56,270
Let's say that we have some content in our div or in our box.
43

44
00:03:56,430 --> 00:04:03,410
Now let's say that we have some text, for example. The first thing that you remember is that even if our
44

45
00:04:03,420 --> 00:04:11,310
div or our box had no height and no width, it will have the height and width in order to fit our content.
45

46
00:04:11,310 --> 00:04:14,350
Now let's say that we didn't like the way that this looks.
46

47
00:04:14,460 --> 00:04:21,390
We want have a little bit of padding or a little bit of space between the text and the edge of the element
47

48
00:04:21,420 --> 00:04:23,200
or where the border starts.
48

49
00:04:23,430 --> 00:04:30,630
Well then we can actually specify some padding and this says that there should be 20 pixels of space
49

50
00:04:31,050 --> 00:04:37,040
on all four edges between the text and the edge of the element.
50

51
00:04:37,050 --> 00:04:40,020
So now our box is even bigger.
51

52
00:04:40,110 --> 00:04:44,250
The padding actually increases the size of your box.
52

53
00:04:44,250 --> 00:04:53,370
Now the final dimension that we can add is the margin and the margin is a buffer zone if you will between
53

54
00:04:53,370 --> 00:04:57,170
the current element and any others that are on screen.
54

55
00:04:57,300 --> 00:05:03,390
So say if I had another element on the right, the margin gives our element a little bit of space between
55

56
00:05:03,390 --> 00:05:06,460
each other outside of the border.
56

57
00:05:06,510 --> 00:05:13,500
And now you can start to see how we can use the margin, the padding, the border, the width and the height
57

58
00:05:13,770 --> 00:05:21,270
to start affecting the layout and the appearance of all of our HTML elements, which as you remember at
58

59
00:05:21,270 --> 00:05:24,010
the end of the day are just boxes.
59

60
00:05:24,300 --> 00:05:32,170
So that box model is shown every single time you inspect on an HTML element, and you can see this little
60

61
00:05:32,190 --> 00:05:34,380
diagram in the Chrome Developer Tools
61

62
00:05:34,380 --> 00:05:36,750
every single time you hit Inspect.
62

63
00:05:36,750 --> 00:05:44,220
So for example if I select this div then this is the current box model. It had as no margin, no border and no
63

64
00:05:44,220 --> 00:05:48,600
padding, but it has a width and a height of this amount.
64

65
00:05:48,600 --> 00:05:55,360
Now if I select the h1, then you can see that this actually has a margin at the bottom which is 
65

66
00:05:55,360 --> 00:05:56,790
21.4.
66

67
00:05:56,940 --> 00:06:03,660
And that's what's pushing it away from this paragraph element, but the paragraph element also itself
67

68
00:06:03,750 --> 00:06:04,840
has some values.
68

69
00:06:05,010 --> 00:06:09,390
For example it has a 16 pixel margin at the top and the bottom.
69

70
00:06:09,390 --> 00:06:16,650
And if I highlight this margin part on the box model then you can see it show up highlighted in orange
70

71
00:06:16,920 --> 00:06:17,780
on our web site.
71

72
00:06:17,910 --> 00:06:24,450
Now it's pretty easy to edit these values using the box model inside Chrome Developer Tools, and that
72

73
00:06:24,450 --> 00:06:29,220
allows you to quite easily visualize what each of these things are doing.
73

74
00:06:29,220 --> 00:06:35,610
So for example say I want to give a little bit of padding to the content inside my div then I can double
74

75
00:06:35,610 --> 00:06:43,410
click on this padding and I could say maybe 20 pixels from the top and 20 pixels from the left.
75

76
00:06:43,410 --> 00:06:51,330
And now you can see that my text, my content rather, is pushed out from the left and from the top now,
76

77
00:06:51,420 --> 00:06:55,650
and it adds those rules over here in the styles.
77

78
00:06:55,760 --> 00:07:03,180
Now instead of doing that I could also just say, lets give it a 20 pixel padding all around, all four
78

79
00:07:03,180 --> 00:07:10,640
sides. And you'll notice that the background color is now in an area that's much bigger.
79

80
00:07:10,860 --> 00:07:16,700
And by increasing the padding we've actually increased the size of our element.
80

81
00:07:16,710 --> 00:07:20,600
Now that's not true for all of these different things.
81

82
00:07:20,640 --> 00:07:25,650
For example let's add a 20 pixel margin all around our div.
82

83
00:07:25,740 --> 00:07:32,670
Now the parts that have the background color represents our element, and the margin just takes it away
83

84
00:07:32,970 --> 00:07:35,220
from all the other things around.
84

85
00:07:35,220 --> 00:07:38,330
So in this case we don't actually have much else around.
85

86
00:07:38,340 --> 00:07:44,670
We've only got the top, the left and the right of the screen to push it away from, but say if we go back into
86

87
00:07:44,670 --> 00:07:50,580
Atom, and as a challenge I want you to add two more divs below this one.
87

88
00:07:50,760 --> 00:07:57,380
And I want you to give each of these three divs a class. So the first one should be the top container,
88

89
00:07:57,420 --> 00:08:02,100
the second one will be called the middle container, and the last one will be called the bottom container,
89

90
00:08:02,310 --> 00:08:05,140
and each of these two divs should be a square
90

91
00:08:05,190 --> 00:08:11,700
that has a height of 200 pixels and a width of 200 pixels and gives them each a different background
91

92
00:08:11,700 --> 00:08:14,770
color, so that we can differentiate them on our website.
92

93
00:08:14,910 --> 00:08:21,120
And this is what you'll end up with if you complete the challenge: a red and blue div that are sitting
93

94
00:08:21,120 --> 00:08:27,180
on top of each other, and they are 200 pixels wide in width and in height.
94

95
00:08:27,180 --> 00:08:30,610
So pause the video and try to complete the challenge.
95

96
00:08:31,990 --> 00:08:32,350
All right.
96

97
00:08:32,350 --> 00:08:34,070
So how did that go?
97

98
00:08:34,240 --> 00:08:39,300
Well, just below our first div, we're going to go ahead and create two more of them.
98

99
00:08:39,400 --> 00:08:41,360
So that's the middle one.
99

100
00:08:41,410 --> 00:08:47,290
And this is the bottom one. We're going to change the class, to give it a value, so that we can differentiate
100

101
00:08:47,290 --> 00:08:48,450
between them.
101

102
00:08:48,460 --> 00:08:55,160
Now in this case feel free to use id or class, because if we're only going to have one top container,
102

103
00:08:55,160 --> 00:09:00,460
one middle and one bottom container, we can actually give this an id or a class.
103

104
00:09:00,460 --> 00:09:02,140
It doesn't really matter all that much
104

105
00:09:02,140 --> 00:09:03,000
in this case.
105

106
00:09:03,130 --> 00:09:14,720
So if we call the top one top-container, the middle one middle-container and the bottom one bottom-container,
106

107
00:09:14,770 --> 00:09:21,190
now we have three different divs, and we can now style them inside our CSS separately.
107

108
00:09:21,520 --> 00:09:29,530
So instead of styling all the divs we're going to instead select the top container and remember in order
108

109
00:09:29,530 --> 00:09:34,850
to pick out a class we have to add a dot in front of that identifier.
109

110
00:09:34,960 --> 00:09:40,300
So for the top-container class I'm just going to paste in that background color.
110

111
00:09:40,300 --> 00:09:48,750
Next one is the middle container and this one is going to have a background color of red.
111

112
00:09:49,330 --> 00:09:52,720
And the final one is the bottom container.
112

113
00:09:54,320 --> 00:10:00,560
And this one's background color will be blue, shall we? Hit save.
113

114
00:10:00,620 --> 00:10:07,400
And as we said these two containers, because they don't have any content, then that means they won't have
114

115
00:10:07,400 --> 00:10:10,060
any dimensions unless we give it to them.
115

116
00:10:10,070 --> 00:10:19,070
So let's say that the middle container should have a width of 200 pixels wide and a height of 200 pixels
116

117
00:10:19,070 --> 00:10:19,520
as well.
117

118
00:10:19,520 --> 00:10:25,190
So now it's a box and I'm just going to copy and paste that over to the bottom container as
118

119
00:10:25,190 --> 00:10:31,000
well. Now if we hit save and we take a look. Let's get rid of this.
119

120
00:10:31,090 --> 00:10:32,250
Hit refresh.
120

121
00:10:32,450 --> 00:10:39,020
Then you can see that we've got our top div over here, a red square and a blue square all showing up
121

122
00:10:39,140 --> 00:10:40,170
on screen.
122

123
00:10:40,340 --> 00:10:46,580
Now if we right click and pull up the Chrome Developer Tools once more, then you can see that we can
123

124
00:10:46,580 --> 00:10:51,410
play around with all of these properties only using the Chrome Developer Tools.
124

125
00:10:51,410 --> 00:10:59,090
So for example if I select my top container and I change the height to say 200 pixels making it a little
125

126
00:10:59,090 --> 00:11:05,930
bit bigger and change its width also to 200 pixels making it look a bit more like the other two squares.
126

127
00:11:05,930 --> 00:11:07,870
I can also add a bit of padding.
127

128
00:11:07,880 --> 00:11:15,080
So let's give it 20 pixels of padding around all 4 edges and you can see that this hasn't changed the
128

129
00:11:15,080 --> 00:11:23,030
height or width. The height and width are still 200 by 200, but now it has 20 pixels of padding all around
129

130
00:11:23,030 --> 00:11:30,350
it, making the entire element that has that background color look a lot bigger than what it used to be,
130

131
00:11:30,530 --> 00:11:34,180
because we've just added 40 pixels to the width and the height.
131

132
00:11:34,190 --> 00:11:42,830
Now what if we add a 10 pixel solid border then you can see that that border hasn't affected the size
132

133
00:11:42,830 --> 00:11:49,050
of the part that has a blue background color but it has made this whole element even larger.
133

134
00:11:49,130 --> 00:11:54,380
And now our height is 200 plus 30 pixels each side.
134

135
00:11:54,380 --> 00:12:00,590
So it's actually 260 pixels high and 260 pixels wide.
135

136
00:12:00,590 --> 00:12:06,860
Now what if I add a little bit of margin to this. Let's say we have a 10 pixel margin around all four
136

137
00:12:06,860 --> 00:12:07,580
sides.
137

138
00:12:07,580 --> 00:12:13,460
Now the margin doesn't affect the height or the width or any of the other previous values.
138

139
00:12:13,700 --> 00:12:18,430
And it doesn't even change the part of the element that has the background color.
139

140
00:12:18,680 --> 00:12:24,980
It just gives it a little bit of space away from the other elements and it pushes them away so that
140

141
00:12:24,980 --> 00:12:29,430
they're not sticking to this current container or this current div.
141

142
00:12:29,480 --> 00:12:36,770
Now here's a web site where you can actually see that box model as it turns to the side and it shows
142

143
00:12:36,770 --> 00:12:43,160
you which parts are the padding, which parts will get filled with the background image, which parts will
143

144
00:12:43,160 --> 00:12:48,270
end up with the background color and which parts the content would go.
144

145
00:12:48,620 --> 00:12:54,680
So this is a neat tool to just talk around and just wrap your head around this idea of the box model
145

146
00:12:54,920 --> 00:13:01,880
because it is a little bit weird that when you have padding it only pads the content but not things
146

147
00:13:01,880 --> 00:13:05,090
like the background image or the background color.
147

148
00:13:05,150 --> 00:13:10,370
So I've included a link to this web site inside the resources of this lesson.
148

149
00:13:10,370 --> 00:13:15,290
And you can go here and just have a play around and get to grips with this idea.
149

150
00:13:15,320 --> 00:13:22,070
Now, once you've done that, I've got a challenge for you, I want you to use the Chrome Developer Tools,
150

151
00:13:22,130 --> 00:13:28,820
so don't edit the styles inside Atom, but instead just make temporary changes to the web site so that
151

152
00:13:28,850 --> 00:13:32,560
you can change the margins, the borders, the paddings.
152

153
00:13:32,600 --> 00:13:38,660
Now the only thing that's not going to change is the height and width of these divs or these boxes.
153

154
00:13:38,660 --> 00:13:42,510
But I want you to create a design that looks like this.
154

155
00:13:42,560 --> 00:13:49,460
So you're going to have that first box right towards the edge of the top and the left of the web page,
155

156
00:13:49,820 --> 00:13:54,970
then you're going to have the two other boxes that touch corner to corner,
156

157
00:13:55,100 --> 00:14:01,310
and the second one is going to have a 20 pixel border, and the third one is going to have a 10 pixel
157

158
00:14:01,310 --> 00:14:05,260
border, and you can change the color to match the scheme as well.
158

159
00:14:05,330 --> 00:14:09,800
But the main thing is that the corners must touch each other.
159

160
00:14:09,800 --> 00:14:16,670
And I want you to use a combination of margins, padding, border, whatever it may be in order to achieve
160

161
00:14:16,820 --> 00:14:18,360
this design.
161

162
00:14:18,410 --> 00:14:21,440
So pause the video now and give it a go.
162

163
00:14:24,050 --> 00:14:24,380
All right.
163

164
00:14:24,380 --> 00:14:28,820
So what you might realize is that this involves a little bit of Maths.
164

165
00:14:28,880 --> 00:14:34,970
So firstly I'm going to switch my Chrome browser tool to make it go on the right side so I can look
165

166
00:14:34,970 --> 00:14:40,770
at this while I'm editing my CSS code and look at the box at the same time.
166

167
00:14:40,790 --> 00:14:49,560
So the first thing was that we wanted the top div to also be 200 pixels by 200 pixels. There we go.
167

168
00:14:49,560 --> 00:14:50,650
We've got our square.
168

169
00:14:50,660 --> 00:14:57,060
So we now have three squares but we need the first one to have a 10 pixel border.
169

170
00:14:57,320 --> 00:15:06,340
So border solid, and let's give it 20 pixels of padding around all four edges.
170

171
00:15:06,340 --> 00:15:06,610
All right.
171

172
00:15:06,610 --> 00:15:13,220
So onto the next part. Our middle box is red and it has a 20 pixel solid border.
172

173
00:15:13,240 --> 00:15:21,280
So let's go ahead and select the middle container and we're going to give it a border that is going
173

174
00:15:21,280 --> 00:15:25,440
to be solid and 20 pixels all around.
174

175
00:15:25,510 --> 00:15:32,640
But now we have to make the second box touch with the first box edge to edge.
175

176
00:15:32,680 --> 00:15:36,630
So this actually involves a little bit of calculating.
176

177
00:15:36,880 --> 00:15:45,840
So if we go back to that first box we can see that it's width is calculated by all of these numbers.
177

178
00:15:45,900 --> 00:15:52,980
So it's 200 pixels in terms of the content then 20 pixels either side.
178

179
00:15:53,040 --> 00:15:55,400
So add 40 for the padding.
179

180
00:15:55,650 --> 00:15:59,870
Then add another 20 for the border and the margin is zero.
180

181
00:16:00,030 --> 00:16:06,750
So that's actually 200 plus 40 plus 20 which is 260.
181

182
00:16:06,750 --> 00:16:18,240
So that means that if our second div had a left margin of two hundred and sixty pixels then it will
182

183
00:16:18,240 --> 00:16:22,140
touch edge to edge with that first box.
183

184
00:16:22,140 --> 00:16:27,480
So if this challenge has baffled you up till now then pause the video
184

185
00:16:27,480 --> 00:16:34,260
now that you've seen this little hint, and try to do the same thing for the last box, making sure that
185

186
00:16:34,260 --> 00:16:40,180
you've implemented exactly what we wanted for the dimensions and the layout.
186

187
00:16:40,230 --> 00:16:43,150
But if you want to follow along with me that's also cool.
187

188
00:16:43,320 --> 00:16:45,060
So first things first.
188

189
00:16:45,120 --> 00:16:46,880
This one is yellow, ours is blue.
189

190
00:16:46,890 --> 00:16:47,700
Doesn't really matter.
190

191
00:16:47,720 --> 00:16:49,000
But we can change it over.
191

192
00:16:49,020 --> 00:16:54,330
So we're going to select our last div and we're going to change the background color to yellow
192

193
00:16:55,100 --> 00:16:58,670
or gold or whichever color you want.
193

194
00:16:58,940 --> 00:17:03,330
And then we're going to give it a border of 10 pixels solid.
194

195
00:17:03,530 --> 00:17:10,280
So we're going to say border solid 10 pixels all around.
195

196
00:17:10,280 --> 00:17:16,490
And now we have to calculate how far we need to push this square in order to make it touch corner to
196

197
00:17:16,490 --> 00:17:19,160
corner with this red box.
197

198
00:17:19,190 --> 00:17:26,250
So we remember that this was 260 pixels wide, calculating
198

199
00:17:26,270 --> 00:17:30,040
adding all of these border padding and widths together.
199

200
00:17:30,500 --> 00:17:38,570
And this one has a content of 200 pixels wide and has no padding but it has a 20 pixel border left and
200

201
00:17:38,570 --> 00:17:39,100
right.
201

202
00:17:39,260 --> 00:17:46,880
So in total that's 240 in width, so 240 plus 260 is 500.
202

203
00:17:46,880 --> 00:17:55,610
So if we select our last div and we give it a margin-left, so we can either type it out or we can select
203

204
00:17:55,610 --> 00:17:57,320
it inside the box model,
204

205
00:17:57,320 --> 00:18:06,140
but if we make this one 500 pixels margin-left, then you'll see that the corners now all touch each other
205

206
00:18:06,590 --> 00:18:10,730
and we have exactly the same design as we've got over here.
206

207
00:18:10,730 --> 00:18:14,330
Now how did that go? If that was confusing at all,
207

208
00:18:14,330 --> 00:18:19,970
then make sure you play around more with the Chrome Developer Tools either through changing everything
208

209
00:18:20,000 --> 00:18:28,260
in the box model here or by adding in new style rules through the CSS inside Chrome Developer Tools.
209

210
00:18:28,430 --> 00:18:34,790
But make sure that you can get these things to be pushed left and right and top and bottom and make
210

211
00:18:34,790 --> 00:18:37,410
it look the way that you want it to.
211

212
00:18:37,760 --> 00:18:44,630
Now if you want the boxes to line up one after the other on the same horizontal plane then that's a
212

213
00:18:44,630 --> 00:18:45,940
little bit more difficult.
213

214
00:18:46,010 --> 00:18:48,710
And we're going to come to that very very shortly.
214

215
00:18:48,890 --> 00:18:55,190
So don't beat yourself up if you can't do that but you should be able to move it top and bottom and add the
215

216
00:18:55,190 --> 00:18:59,560
padding at the borders and make the content look the way you want it to.
216

217
00:18:59,870 --> 00:19:02,160
But once you're done hit refresh.
217

218
00:19:02,210 --> 00:19:03,930
And all of that work goes away.
218

219
00:19:04,040 --> 00:19:10,670
But we're back to where we are and we can continue beautifying our web site and giving it a proper modern
219

220
00:19:10,670 --> 00:19:11,510
design.
220

221
00:19:11,540 --> 00:19:17,630
Now in the next lesson we're going to talk about the CSS display property so that we can start to understand
221

222
00:19:17,930 --> 00:19:21,430
how the positioning of elements work on screen.
222

223
00:19:21,440 --> 00:19:25,080
So for all of that and more I'll see you on the next lesson.