Now we've seen before that every single HTML element on screen is just treated as a box by our 1
CSS, and by styling that box, by changing its height, its width, its margin, its padding, 2
that’s how we can determine how our elements can be laid out and how it will show up on screen. 3
So for example if we specified a CSS rule that targeted all the images on this I Love Bacon web site 4
to say that it should have a width of 100 percent, 5
all that’s going to do is it's going to change the width of that box to 100 percent, 6
and in the process scales up our image so that it expands to fill the entire width of our screen. 7
And this concept in CSS is lovingly known as the box model. To explain this, 8
let’s take a simple div that we've given a background color to. 9
And let's say that this div has a height of 300 pixels and a width of 300 pixels to begin with. 10
Now if I change the height to 600 pixels then that div will expand vertically pushing down any other 11
divs or any other content that's not inside this current container. 12
Now I can also do the same with the width and make it much wider, 13
so that anything that used to be on the right of this current box would get pushed out of the way. 14
Now you've seen that we can specify these values either as static pixels, 15
so for example here, or we can use percentages. 16
For example I can say that the width should be 100 percent and that refers to 100 percent of the viewport. 17
Now the viewport is just the screen that you're viewing the web site on. 18
So that could be a laptop screen or your mobile screen or your iPad screen, but this will expand to 100 19
percent of whatever that screen size may be. 20
Now here's where it gets interesting. 21
In addition to the width and the height of an element you can also specify that it should have a border 22
or not. 23
Now if you say that the border is going to be a solid border using CSS, then you will see a default 3 24
pixel border show up around your element. 25
Now remember that this border doesn't encroach on the size of your element. 26
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
the border size to say that the border width should be 50 pixels all round, so that’s 50 pixels on every 28
single side. 29
So now the width of this entire element is actually much wider because in addition to 300 pixels width for 30
the original element, 31
so that's the blue part, 32
we’ve now also got a 50 pixel border on each side, and the entire thing now takes up 400 pixels. 33
Now instead of specifying a border width for all four sides, you can override that border by saying specifically 34
that the border top should only have 0 pixels. 35
Alternatively you can use the circle shorthand. 36
So it means that we're going around in a circle starting from the top. 37
So the border width starting at the top is going to have 0 pixels at the top, 10 pixels at the right, 38
20 pixels on the bottom and 30 pixels on the left. 39
And as you go clockwise you give your element dimensions that you specify for all four sides and there's 40
other variations around this theme as well which you'll find in the documentation. 41
Now let's take this one step further. 42
Let's say that we have some content in our div or in our box. 43
Now let's say that we have some text, for example. The first thing that you remember is that even if our 44
div or our box had no height and no width, it will have the height and width in order to fit our content. 45
Now let's say that we didn't like the way that this looks. 46
We want have a little bit of padding or a little bit of space between the text and the edge of the element 47
or where the border starts. 48
Well then we can actually specify some padding and this says that there should be 20 pixels of space 49
on all four edges between the text and the edge of the element. 50
So now our box is even bigger. 51
The padding actually increases the size of your box. 52
Now the final dimension that we can add is the margin and the margin is a buffer zone if you will between 53
the current element and any others that are on screen. 54
So say if I had another element on the right, the margin gives our element a little bit of space between 55
each other outside of the border. 56
And now you can start to see how we can use the margin, the padding, the border, the width and the height 57
to start affecting the layout and the appearance of all of our HTML elements, which as you remember at 58
the end of the day are just boxes. 59
So that box model is shown every single time you inspect on an HTML element, and you can see this little 60
diagram in the Chrome Developer Tools 61
every single time you hit Inspect. 62
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
padding, but it has a width and a height of this amount. 64
Now if I select the h1, then you can see that this actually has a margin at the bottom which is 65
21.4. 66
And that's what's pushing it away from this paragraph element, but the paragraph element also itself 67
has some values. 68
For example it has a 16 pixel margin at the top and the bottom. 69
And if I highlight this margin part on the box model then you can see it show up highlighted in orange 70
on our web site. 71
Now it's pretty easy to edit these values using the box model inside Chrome Developer Tools, and that 72
allows you to quite easily visualize what each of these things are doing. 73
So for example say I want to give a little bit of padding to the content inside my div then I can double 74
click on this padding and I could say maybe 20 pixels from the top and 20 pixels from the left. 75
And now you can see that my text, my content rather, is pushed out from the left and from the top now, 76
and it adds those rules over here in the styles. 77
Now instead of doing that I could also just say, lets give it a 20 pixel padding all around, all four 78
sides. And you'll notice that the background color is now in an area that's much bigger. 79
And by increasing the padding we've actually increased the size of our element. 80
Now that's not true for all of these different things. 81
For example let's add a 20 pixel margin all around our div. 82
Now the parts that have the background color represents our element, and the margin just takes it away 83
from all the other things around. 84
So in this case we don't actually have much else around. 85
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
Atom, and as a challenge I want you to add two more divs below this one. 87
And I want you to give each of these three divs a class. So the first one should be the top container, 88
the second one will be called the middle container, and the last one will be called the bottom container, 89
and each of these two divs should be a square 90
that has a height of 200 pixels and a width of 200 pixels and gives them each a different background 91
color, so that we can differentiate them on our website. 92
And this is what you'll end up with if you complete the challenge: a red and blue div that are sitting 93
on top of each other, and they are 200 pixels wide in width and in height. 94
So pause the video and try to complete the challenge. 95
All right. 96
So how did that go? 97
Well, just below our first div, we're going to go ahead and create two more of them. 98
So that's the middle one. 99
And this is the bottom one. We're going to change the class, to give it a value, so that we can differentiate 100
between them. 101
Now in this case feel free to use id or class, because if we're only going to have one top container, 102
one middle and one bottom container, we can actually give this an id or a class. 103
It doesn't really matter all that much 104
in this case. 105
So if we call the top one top-container, the middle one middle-container and the bottom one bottom-container, 106
now we have three different divs, and we can now style them inside our CSS separately. 107
So instead of styling all the divs we're going to instead select the top container and remember in order 108
to pick out a class we have to add a dot in front of that identifier. 109
So for the top-container class I'm just going to paste in that background color. 110
Next one is the middle container and this one is going to have a background color of red. 111
And the final one is the bottom container. 112
And this one's background color will be blue, shall we? Hit save. 113
And as we said these two containers, because they don't have any content, then that means they won't have 114
any dimensions unless we give it to them. 115
So let's say that the middle container should have a width of 200 pixels wide and a height of 200 pixels 116
as well. 117
So now it's a box and I'm just going to copy and paste that over to the bottom container as 118
well. Now if we hit save and we take a look. Let's get rid of this. 119
Hit refresh. 120
Then you can see that we've got our top div over here, a red square and a blue square all showing up 121
on screen. 122
Now if we right click and pull up the Chrome Developer Tools once more, then you can see that we can 123
play around with all of these properties only using the Chrome Developer Tools. 124
So for example if I select my top container and I change the height to say 200 pixels making it a little 125
bit bigger and change its width also to 200 pixels making it look a bit more like the other two squares. 126
I can also add a bit of padding. 127
So let's give it 20 pixels of padding around all 4 edges and you can see that this hasn't changed the 128
height or width. The height and width are still 200 by 200, but now it has 20 pixels of padding all around 129
it, making the entire element that has that background color look a lot bigger than what it used to be, 130
because we've just added 40 pixels to the width and the height. 131
Now what if we add a 10 pixel solid border then you can see that that border hasn't affected the size 132
of the part that has a blue background color but it has made this whole element even larger. 133
And now our height is 200 plus 30 pixels each side. 134
So it's actually 260 pixels high and 260 pixels wide. 135
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
sides. 137
Now the margin doesn't affect the height or the width or any of the other previous values. 138
And it doesn't even change the part of the element that has the background color. 139
It just gives it a little bit of space away from the other elements and it pushes them away so that 140
they're not sticking to this current container or this current div. 141
Now here's a web site where you can actually see that box model as it turns to the side and it shows 142
you which parts are the padding, which parts will get filled with the background image, which parts will 143
end up with the background color and which parts the content would go. 144
So this is a neat tool to just talk around and just wrap your head around this idea of the box model 145
because it is a little bit weird that when you have padding it only pads the content but not things 146
like the background image or the background color. 147
So I've included a link to this web site inside the resources of this lesson. 148
And you can go here and just have a play around and get to grips with this idea. 149
Now, once you've done that, I've got a challenge for you, I want you to use the Chrome Developer Tools, 150
so don't edit the styles inside Atom, but instead just make temporary changes to the web site so that 151
you can change the margins, the borders, the paddings. 152
Now the only thing that's not going to change is the height and width of these divs or these boxes. 153
But I want you to create a design that looks like this. 154
So you're going to have that first box right towards the edge of the top and the left of the web page, 155
then you're going to have the two other boxes that touch corner to corner, 156
and the second one is going to have a 20 pixel border, and the third one is going to have a 10 pixel 157
border, and you can change the color to match the scheme as well. 158
But the main thing is that the corners must touch each other. 159
And I want you to use a combination of margins, padding, border, whatever it may be in order to achieve 160
this design. 161
So pause the video now and give it a go. 162
All right. 163
So what you might realize is that this involves a little bit of Maths. 164
So firstly I'm going to switch my Chrome browser tool to make it go on the right side so I can look 165
at this while I'm editing my CSS code and look at the box at the same time. 166
So the first thing was that we wanted the top div to also be 200 pixels by 200 pixels. There we go. 167
We've got our square. 168
So we now have three squares but we need the first one to have a 10 pixel border. 169
So border solid, and let's give it 20 pixels of padding around all four edges. 170
All right. 171
So onto the next part. Our middle box is red and it has a 20 pixel solid border. 172
So let's go ahead and select the middle container and we're going to give it a border that is going 173
to be solid and 20 pixels all around. 174
But now we have to make the second box touch with the first box edge to edge. 175
So this actually involves a little bit of calculating. 176
So if we go back to that first box we can see that it's width is calculated by all of these numbers. 177
So it's 200 pixels in terms of the content then 20 pixels either side. 178
So add 40 for the padding. 179
Then add another 20 for the border and the margin is zero. 180
So that's actually 200 plus 40 plus 20 which is 260. 181
So that means that if our second div had a left margin of two hundred and sixty pixels then it will 182
touch edge to edge with that first box. 183
So if this challenge has baffled you up till now then pause the video 184
now that you've seen this little hint, and try to do the same thing for the last box, making sure that 185
you've implemented exactly what we wanted for the dimensions and the layout. 186
But if you want to follow along with me that's also cool. 187
So first things first. 188
This one is yellow, ours is blue. 189
Doesn't really matter. 190
But we can change it over. 191
So we're going to select our last div and we're going to change the background color to yellow 192
or gold or whichever color you want. 193
And then we're going to give it a border of 10 pixels solid. 194
So we're going to say border solid 10 pixels all around. 195
And now we have to calculate how far we need to push this square in order to make it touch corner to 196
corner with this red box. 197
So we remember that this was 260 pixels wide, calculating 198
adding all of these border padding and widths together. 199
And this one has a content of 200 pixels wide and has no padding but it has a 20 pixel border left and 200
right. 201
So in total that's 240 in width, so 240 plus 260 is 500. 202
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
it inside the box model, 204
but if we make this one 500 pixels margin-left, then you'll see that the corners now all touch each other 205
and we have exactly the same design as we've got over here. 206
Now how did that go? If that was confusing at all, 207
then make sure you play around more with the Chrome Developer Tools either through changing everything 208
in the box model here or by adding in new style rules through the CSS inside Chrome Developer Tools. 209
But make sure that you can get these things to be pushed left and right and top and bottom and make 210
it look the way that you want it to. 211
Now if you want the boxes to line up one after the other on the same horizontal plane then that's a 212
little bit more difficult. 213
And we're going to come to that very very shortly. 214
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
padding at the borders and make the content look the way you want it to. 216
But once you're done hit refresh. 217
And all of that work goes away. 218
But we're back to where we are and we can continue beautifying our web site and giving it a proper modern 219
design. 220
Now in the next lesson we're going to talk about the CSS display property so that we can start to understand 221
how the positioning of elements work on screen. 222
So for all of that and more I'll see you on the next lesson.