Welcome back.
In this video, I want to talk about the box model, and it's a very important concept and it's something
that you might have been kind of curious in the back of your head about, and that is this image right
here.
In case we have this idea of the box model which has the content.
It has the padding the border, which we've seen before, and then the margin, so we're going to talk
about that in this video.
So we have are not so pretty website right now, but I have left intentionally our login page still
kind of blank.
And you see that there's no styles apply to it, because if we go to the login page, I'm going to drag
it over here.
It's referencing style, too, which doesn't have much styles happening.
To really emphasize this point, I wanted to just instead of the lorem ipsum, I'm going to create a
div if I give this a class of.
Box model, I can go into my style to which I'm going to drag over here and I can say box model.
Border.
Five pixels, solid red, I save this and refresh.
OK, so we have our box model, let's add something into this div.
We have a and right now it's covering the entire space, but if we add three more.
We'll call this one the.
The next one, see, I save and refresh.
OK, we have these, and if we wanted them all in one line, then you might remember that that was display
in line block.
And I save refresh.
There we have it.
OK, let's talk about the box model here.
Let's say we wanted more space inside of these for the letters.
Well, in that case, we can use something like padding.
So padding, I can put 20 pixels.
Save and refresh, and there's our padding, but let's say we wanted different padding so that the sides
are wider than the top.
In that case, we can do something like five pixels at the top, 20 pixels on the right side, five
pixels at the bottom and 20 pixels to the left eye refresh.
And look at that, and that's just the standard that you'll have to get used to its top right, bottom
left.
You can also actually do padding, as you can see in the dropped on bottom left, top right to specify.
But this is a quicker way of doing it.
If you remember, there was one more and that was margin.
So margin allows us to create space outside of the border.
So if I go 20 pixels here and I save refresh.
You can see that we created 20 pixels on the left side and right side, but also the top and the bottom,
let's say we only want spaces between the boxes, but not at the top and bottom.
Well, same principle.
Again, we can do zero pixels, 20 pixels.
Zero pixels and 20 pixels, so top right, bottom left, save and refresh.
There you go.
Now, this might get tedious.
There is one other shorthand way, and that is you can remove this.
So this means top and bottom.
This means left and right.
I save this and refresh.
Nothing should change and it doesn't.
And we can do the same at the top here as well.
Perfect.
One last thing I want to show you is that if we open up our developer tools, so again, we do inspect.
You'll see in our styles that we have our box model, so if you see over here, we have our content,
we have our padding and it says 20 pixels, five pixels, five pixels.
We have our border.
Five pixels, five pixels, five pixel, five pixels, and then our margin zero with 20 on the side.
So again, Chrome allows you to browse around and make sure that all of these are properly done.
The last thing you might ask is, what about this content?
How can I change this?
And that's very simple.
You can do something like with this two thirty three pixels, save and refresh and also do height.
Do 55 pixels save and refresh?
And you'll see over here that in our box model, we now have the content with thirty three pixels by
fifty five pixels.
All right, that's it for now.
See you in the next one.
Bye bye.