Now, we've seen before that every single HTML element onscreen is just treated as a box by our CSS
and by styling that box, by changing its height, its width, its margin, its padding,
that's how we can determine how our elements can be laid out and how it will show up onscreen.
So, for example, if we specified a CSS rule that targeted all the images on this I Love Bacon website
to say that it should have a width of 100 percent,
all that's going to do is it's going to change the width of that box to 100%
and in the process scales up our image so that it expands to fill the entire width of our screen.
And this concept in CSS is lovingly known as the box model. To explain this
let's take a simple div that we've given a background color to, and let's say that this div has a height
of 300 pixels and a width of 300 pixels to begin with.
Now, if I change the height to 600 pixels, then that div will expand vertically, pushing down any
other divs or any other content that's not inside this current container.
Now I can also do the same with the width and make it much wider so that anything that used to be on
the right of this current box would get pushed out of the way.
Now you've seen that we can specify these values either as static pixels,
so for example here, or we can use percentages, for example I can say that the width should be 100%
and that refers to 100% of the viewport.
Now, the viewport is just the screen that you're viewing the website on.
So that could be your laptop screen or your mobile screen or your iPad screen, but this will expand
to 100% of whatever that screen size may be.
Now here's where it gets interesting.
In addition to the width and the height of an element, you can also specify that it should have a border
or not.
Now, if you say that the border is going to be a solid border using CSS, then you will see a default
3px border show up around your element.
Now, remember that this border doesn't encroach on the size of your element, so if it's 300px
by 300px, that blue area is still going to be 300 by 300.
But you can expand the border size to say that the border width should be 50px all round,
so that's 50 pixels on every single side.
So now the width of this entire element is actually much wider because in addition to 300 pixels width
for the original element,
so that's the blue part,
we've now also got a 50px border on each side, and the entire thing now takes up 400px.
Now, instead of specifying a border for all four sides, you can override that border by saying
specifically that the border top should only have zero pixels.
Alternatively, you can use the circle shorthand, so it means that we're going around in a circle starting
from the top.
So the border width starting at the top is going to have 0px at the top, 10px at the right,
20px on the bottom and 30px on the left.
And as you go clockwise, you give your element dimensions that you specify for all four sides and there's
other variations around this theme as well, which you'll find in the documentation.
Now let's take this one step further.
Let's say that we had some content in our div or in our box.
Now, let's say that we had some text, for example.
The first thing that we remember is that even if our div or our box had no height and no width, it
will have the height and width in order to fit our content.
Now let's say that we didn't like the way that this looks.
We want to have a little bit of padding or a little bit of space between the text and the edge of the
element or where the border starts.
Well, then we can actually specify some padding.
And this says that there should be 20px of space on all four edges between the text and the edge
of the element.
So now our box is even bigger.
The padding actually increases the size of your box.
Now, the final dimension that we can add is the margin, and the margin is a buffer zone, if you will,
between the current element and any others that are on screen.
So say, if I had another element on the right, the margin gives our element a little bit of space
between each other outside of the border.
And now you can start to see how we can use the margin, the padding, the border, the width and the
height to start affecting the layout and the appearance of all of our HTML elements, which, as you
remember at the end of the day, are just boxes.
So that box model is shown every single time you inspect on an HTML element and you can see this little
diagram in the Chrome developer tools every single time you hit Inspect.
So, for example, if I select this div, then this is the current box model. It has no margin, no border,
no padding, but it has a width and a height of this amount.
Now, if I select the H1, then you can see that this actually has a margin at the bottom, which is
21.4, and that's what's pushing it away from this paragraph element.
But the paragraph element also itself has some values.
For example, a 16px margin at the top and the bottom.
And if I highlight this margin part on the box model, then you can see it show up highlighted in orange
on our website.
Now, it's pretty easy to edit these values using the box model inside Chrome developer tools, and
that allows you to quite easily visualise what each of these things are doing.
So, for example, say I wanted to give a little bit of padding to the content inside my div.
Then I could double-click on this padding here and I could say maybe 20px from the top and 20px
from the left.
And now you can see that my text, my content rather, is pushed out from the left, and from the top. Now
and it adds those rules over here in the styles.
Now, instead of doing that, I could also just say, let's give it a 20px padding all round, all
four sides. And you'll notice that the background colour is now in an area that's much bigger.
And by increasing the padding, we've actually increased the size of our element.
Now, that's not true for all of these different things.
For example, let's add a 20px margin all around our div.
Now, the parts that have the background colour represents our element, and the margin just takes it
away from all the other things around.
So in this case, we don't actually have much else around.
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 Atom and as a challenge, I want you to add two more divs below this one
and I want you to give each of these three divs a class. So
the first one should be the top container,
the second one will be called the middle container and the last one will be called the bottom container.
And each of these two divs should be a square that has a height of 200 pixels and a width of 200 pixels
and give them each a different background colour so that we can differentiate them on our website.
And this is what you'll end up with if you complete the challenge: a red and blue div that are sitting
on top of each other and they are 200 pixels wide in width and in height.
So pause the video and try to complete the challenge.
All right.
So how did that go?
Well, just below our first div we're going to go ahead and create two more of them.
So that's the middle one and this is the bottom one.
We're going to change the class to give it a value so that we can differentiate between them.
Now, in this case, feel free to use ID or class, because if we're only going to have one top container,
one middle and one bottom container, we can actually give this an ID or a class.
It doesn't really matter all that much in this case.
So if we call the top one top-container, middle one middle-container and the bottom one,
bottom-container, now we have three different divs, and we can now style them inside our CSS separately.
So instead of styling all the divs, we're going to instead select the top container, and remember,
in order to pick out a class, we have to add a dot in front of that identifier.
So for the top container class, I'm just going to paste in that background color.
Next one is the middle container, and this one is going to have a background color of red. And the final
one is the bottom container
and this one's background color will be blue.
Shall we?
It's saved.
And as we said, these two containers, because they don't have any content, then that means they won't
have any dimensions unless we give it to them.
So let's say that the middle container should have a width of 200 pixels wide and a height of 200 pixels
as well.
So now it's a box, and I'm just going to copy and paste that over to the bottom container as well.
Now, if we hit save and we take a look, let's get rid of this, hit refresh.
Then you can see that we've got our top div over here, a red square and a blue square all showing up
on screen.
Now, if we right-click and pull up the Chrome developer tools once more, then you can see that we
can play around with all of these properties only using the Chrome developer tools.
So for example, if I select my top container and I change the height to say 200 pixels, making it
a little bit bigger and change its width also to 200 pixels, making it look a bit more like the other
two squares.
I can also add a bit of padding, so let's give it 20 pixels padding around all four edges.
And you can see that this hasn't changed the height or width.
The height and width are still 200 by 200,
but now it has 20 pixels of padding all around it making the entire element that has that background
color look a lot bigger than what it used to be because we've just added 40 pixels to the width and
the height.
Now what if we add a 10px solid border?
Then you can see that that border hasn't affected the size of the part that has a blue background color,
but it has made this whole element even larger.
And now our height is 200 plus 30 pixels each side, so it's actually 260 pixels height and 260 pixels
wide.
Now what if I add a little bit of margin to this?
Let's say we have a 10 pixel margin around all four sides.
Now, the margin doesn't affect the height or the width or any of the other previous values, and it
doesn't even change the part of the element that has the background color.
It just gives it a little bit of space away from the other elements, and it pushes them away so that
they're not sticking to this current container, this current div.
Now, in order to better understand this idea of the box model, here's a demo that shows it from a
3D point of view.
So as you see me, drag the perspective where you can actually see that box model as it turns to the
side and it shows you which parts are the padding, which parts will get filled with the background
image,
which parts will end up with the background color and which parts the content would go.
So this is a neat tool to just toggle around and just wrap your head around this idea of the box model
because it is a little bit weird that when you have padding, it only pads the content, but not things
like the background image or the background color.
So if you want, take a moment here, just pause a video, replay this part a few times and get your
head around this idea of the CSS box model and how it's formed.
Now, once you've done that, I've got a challenge for you.
I want you to use the Chrome developer tools, so don't edit the styles inside Atom, but instead just
make temporary changes to the website so that you can change the margins, the borders, the padding.
Now, the only thing that's not going to change is the height and width of these divs or these boxes,
but I want you to create a design that looks like this.
So you're going to have that first box right towards the edge of the top and the left of the web page,
then you're going to have the two other boxes that touch corner to corner.
And the second one is going to have a 20 pixel border,
and the third one is going to have a 10 pixel border.
And you can change the color to match the scheme as well.
But the main thing is that the corners must touch each other, and I want you to use a combination of
margins, padding, border, whatever it may be in order to achieve this design.
So pause the video now and give it a go.
All right, so what you might realize is that this involves a little bit of math.
So firstly, I'm going to switch my Chrome browser tool to make it go on the right side so I can look
at this while I'm editing my CSS code and look at the box at the same time.
So the first thing was that we wanted the top div to also be 200 pixels by 200 pixels. There we go.
We've got our square, so we now have three squares, but we need the first one to have a 10px border.
So border solid.
And let's give it 20px padding around all four edges.
All right, so onto the next part. Our middle box is red and it has a 20 pixel solid border.
So let's go ahead and select the middle container, and we're going to give it a border that is going
to be solid and 20px all around.
But now we have to make the second box touch with the first box edge to edge.
So this actually involves a little bit of calculating.
So if we go back to that first box,
we can see that it's width is calculated by all of these numbers, so it's 200px in terms of
the content, then 20px either side
so add 40 for the padding, then add another 20 for the border and the margin is zero.
So that's actually 200 plus 40 plus 20, which is 260.
So that means that if our second div had a left margin of two hundred and sixty pixels, then it will
touch edge to edge with that first box.
So if this challenge has baffled you up till now, then pause the video
now that you've seen this little hint and try to do the same thing for the last box, making sure that
you've implemented exactly what we wanted for the dimensions and the layout.
But if you want to follow along with me, that's also cool.
So first thing's first, this one is yellow,
ours is blue, doesn't really matter, but we can change it over.
So we're going to select our last div and we're going to change the background colour to yellow.
Or gold or whichever color you want.
And then we're going to give it a border of 10 pixels solid.
So we're going to say border, solid 10px all around.
And now we have to calculate how far we need to push this square in order to make it touch corner to
corner
with this red box.
So we remember that this was 260px wide, calculating adding all of these border
padding and widths together.
And this one has a content of 200px wide,
it has no padding, but it has a 20px border left and right.
So in total, that's 240 in width, so 240 + 260 is 500.
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
it inside the box model, but if we make this one 500px margin-left, then you'll see that the
corners now all touch each other, and we have exactly the same design as we've got over here.
Now, how did that go?
If that was confusing at all, then make sure you play around more with the Chrome developer tools,
either through changing everything in the box model here or by adding in new style rules through the
CSS inside Chrome developer tools.
But make sure that you can get these things to be pushed left and right and top and bottom, and make
it look the way that you want it to.
Now, if you want the boxes to line up one after the other on the same horizontal plane, then that's
a little bit more difficult.
And we're going to come to that very, very shortly.
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 padding add the borders and make the content
look the way you want it to.
But once you're done, hit refresh and all of that work goes away.
But we're back to where we are and we can continue beautifying our website and giving it a proper modern
design.
Now, in the next lesson, we're going to talk about the CSS display property so that we can start
to understand how the positioning of elements work onscreen.
So for all of that and more, I'll see you on the next lesson.