Instructor: Hey guys, in this lesson,
we're gonna talk about
some other really important CSS properties,
and they're ones that you might've already seen
if you've been doing a little bit of CSS inspection
around the internet.
And these are margin, padding, and the border properties.
And these three properties, along with width and height,
form a really important CSS concept known as the box model.
So what exactly is it?
Well, if you think about a typical website,
here I've created one called I Love Bacon,
then you've got different components that are on screen,
different HTML elements.
And even though we can't really see it effectively,
each element is a box in itself,
and we can change the dimensions of those boxes
by changing things such as width and height.
So in this case, I've made my bacon much, much bigger,
and that invisible box around the element
describes how it would be laid out on screen.
If we have an element that has a height of 300 pixels,
we can change that height
to allow our element to take up more vertical spacing
on the webpage.
And when this happens, it pushes the box
of any other elements lower on the webpage.
Now, similarly, we can also change the width of an element
to allow it to take up more space horizontally.
And we can either do this using pixels, as defined here,
or we can use percentages.
So in this case, we've got our blue element
to take up the entire width of the website,
and that can be done using percentages.
In addition to width and height,
we can also set a border on each of the HTML elements.
If you imagine, again, each HTML element being a box,
then this would be the border of the box.
And the way that the border property works
is a little bit different
from what you might have seen before.
It can take three values separated by a space.
The first value that you should provide
is the thickness of the border.
And this, as you can see here,
is the thickness of this line.
If I made it thicker, then it would look like this.
And so we can provide a pixel value for the thickness
as the first item.
Now, the second item is the style of the border.
You can have, for example, solid,
but you can also have a dashed line,
in which case the border would look something like this
instead of a solid line,
as we've gotten here.
And finally, we've got the color of the border
in which you can set to any named color or HEX color,
as we've covered in the Color Properties lesson.
These are three items together
determine what the border should look like.
So if I was to change the border from 10 pixels,
the 30 pixels, then we would get a lot thicker of a border.
But remember, the important thing
is that the height and the width of your HTML element,
your box does not change.
It's exactly the same as what it was before.
So this border actually goes outwards, rather than inwards.
And that's the important thing to remember here.
Now, once you've defined a border,
you can further modify it with more specific rules.
So for example, in this case,
I've got a all-around 30-pixel solid black border
around my element.
But then afterwards on the next line,
and this is very important, where this line goes,
it has to go after the point where we've created the border.
In this case, I'm saying I want the top of that border
to be zero pixels instead.
Well, the way that these rules are evaluated is first,
they will look at this line creating this border,
which is 30 pixels all around.
But then once it lands on the next line,
it evaluates this rule and sees that actually,
I should amend the top of the border to have zero pixels.
So effectively getting rid of the border at the top here,
this border width works similarly
to the way that the border property works.
Namely, that can take a maximum of four values.
The first value is the top, the second is the right,
third is the bottom, and the fourth is the left.
It goes in a clockwise direction.
In addition, you can also just provide two values
for the border width.
And what that does is it sets 1 and 3
and then it sets 2 and 4.
For example, if my border width,
I had set to zero pixels and 20 pixels,
then what that would do is it would set 2 and 4,
which is the left and right, to 20 pixels,
and then it would set 1 and 3 to zero pixels.
This then becomes top and bottom
and then we've got our left and right.
Now, another property I wanna talk about
in regards to the box model is something called padding.
And this is most easily seen
when we have content such as text.
So in this case,
imagine that this blue box is a paragraph element.
And in the paragraph element,
we've got, "Hello world," repeated many, many times.
This paragraph element has got a border property,
and it's a solid black border
measuring 30 pixels wide all around.
If at this point I add a padding property to this element,
then what would happen
is it would push my border out by 20 pixels,
and in this case I'm pushing it by 20 on all sides.
And notice how, again, in this situation,
the height and the width of this box does not change.
It's still the same.
The padding simply adds this padding or space
between the element and the border.
In addition to the padding,
there's also something known as a margin,
and the margin is actually the part
that's outside of the border.
So here again is the border,
in between the border
and the width and height of the element is the padding,
and the part between the border
and any other content that's on screen is the margin.
So in this case,
we've added a margin of 10 pixels on all four sides.
If you imagine we had two elements,
each with the same padding, margin, and border,
then this margin or this distance
between the two elements, in this case,
will actually be 20 pixels
because it's 10 pixels from this side
and 10 pixels from this side.
And it adds the spacing between elements
that you would not get with the padding.
So that is the main difference.
In your CSS inspection,
you might have seen the box model already shown
in the CSS inspector,
and it shows you the margin,
the border, the padding, and the width and height.
So that's what all of these different colors represent.
And when you take a look at the box model on inspection,
then you can actually change each of these values
to see how it would look differently.
If you head over to this address,
appbrewery.github.io/box-model.
And then we go ahead and open up the Developer Tools,
and we select on the first image here,
which shows a daytime world,
and we go into the box model that's under the Styles tab.
If I go ahead and add a margin right here, let's say,
I don't know, 100 pixels, then it's going to add that gap.
Did you see it just now,
that gap between that image and anything that's below it?
And similarly, if I add a little bit of a margin above,
say 100 pixels,
then you can see it adds a gap between that image
and the next element above,
which is that paragraph tag.
However, if I added the padding as 100 pixels,
then you'll see it add the space as well,
but it's actually inside the border of the image.
If this element actually had a border,
which we'll set as 10 pixels solid black,
then you can see how that padding goes to a different place
versus where the border goes.
And this box model is gonna come really, really handy
when you start to try
and lay out different items on your website,
determining how they look
and where they're placed relative to each other.
The final thing I wanted to mention
is that padding and margin,
similar to what we saw for the border
and also the border-width,
function in that same way,
where we've got 1, 2, 3, and 4 values that we can provide.
And if we provide a different value for each of them,
so 0, 10, 20, and 30 pixels,
then this will determine how it looks on all four sides.
And you have to remember
that this is where the first value is, second,
and it goes around in a clockwise direction.
Again, with the border width,
you can change to only provide two values,
so say 10 pixels and 40 pixels.
Then this is going to be applied to the top and the bottom,
and also the left and the right.
So this is just a particular way
of how these three properties can accept multiple values.
If you only set one value, say 10 pixels,
then that's going to affect all sides.
In addition to the boxes that are created by elements,
we can actually create our own boxes independent of that.
And that's really useful
when we want to group different bits of content together,
so that we can style it together
or maybe we want to lay it out together.
For example, here we have an image,
and maybe I would want the image to have a caption,
and I would probably want to style these two bits together
so I can wrap a box around these two elements.
And the way that I would create these artificial boxes
is through the use of a HTML element,
which is called the Content Division element.
There was no point learning
about the div element before we could learn about CSS
because these are completely invisible,
unless you apply CSS style to it.
And the whole purpose is to act as an invisible box
that can contain content
in between the opening and the closing tags.
In the middle, we can put as many elements as we want,
and we can group them into separate boxes known as divs.
So here, I've got the HTML code
from that website I showed you earlier
with the two versions of our world,
the morning and the evening view.
And it's really simple,
and I've only just taken the body section of the HTML.
But here, notice that we've got a paragraph tag
and an image tag,
and they're grouped together
through the use of this div element.
And notice that the div element
doesn't really do anything else,
other than act as a container to group this section together
so that it's separated from other content,
for example this section right here.
And now, we've not only added meaning to our HTML
by saying, "This is one section of content
and this is another section of content,"
but in addition, we can style them differently in CSS.
When we run our code,
this is what the website would look like.
You would not see any of these div elements,
but if we were able to see them,
then they would look like this,
grouping our elements together.
Because these divs are invisible,
sometimes it can be really hard to debug them
and understand what's going on
or more likely what's going wrong with your CSS.
So there's a free Chrome extension
that I recommend you download
to make this process of debugging a little bit easier,
and hence that's why it's called Pesticide.
We're gonna use it to get rid of bugs in our CSS.
I'll add a link to this Chrome extension,
and all you have to do is click Add to Chrome
and then Add extension.
And once you've got it,
then you should be able to look inside your extensions
and then open it up to activate it.
Now, what does it do?
Well, let's demo it.
In addition to the suite of Developer Tools you've got,
now you've also got the Pesticide working for you.
And once you activate it,
you can see these div boxes now show up on screen,
and you can also see the different elements
highlighted in boxes.
And it really helps you diagnose what's wrong
with your box model when it does go wrong.
In addition, if you close down the Chrome Developer Tools
and hold down the Control key,
when you hover on each of these boxes,
down at the bottom of the screen,
you can see how it tells you which node
you are actually hovering on.
So in this case, I'm inside a div,
and it shows you if there are any classes
or IDs on that div as well.
And then here, I'm hovering on an image element,
and here I'm hovering on a paragraph element.
And this can be really helpful
for you to see exactly what's on screen
and almost like put on night vision goggles,
so that we can see our divs, and our elements,
and their alignment, and their sizing.
Finally, we're gonna use everything that we've learned
and put it all together in this exercise.
We're gonna write some code and apply our knowledge.
Go ahead and download this ZIP file
from this current lesson,
extract it, and open it inside VS Code.
Now, once you've done that, open up the index.html,
and you should see a bunch of to-dos.
I want you to follow each of the steps one by one
just as if you were a web developer
following client instructions.
And we're going to use everything you've learned so far
in order to create something that looks like this.
Now, I've marked up this page a little bit,
so I can show you the important parts of the requirements.
For example, notice that here I've said 20-pixel padding,
and that applies to the distance
between that paragraph tag and the border.
And then here, I've said it should have a 20-pixel border
at the top and at the bottom,
but then only a 10-pixel border on the left and the right.
And notice that the layout is very specific here.
Each of these boxes should be touching corner to corner.
So you're gonna have to figure out
how to use the margin property
in order to push these boxes around,
so that they're literally aligned
right up to each other on the same pixel.
I'm gonna leave you to pause the video
and go through each of these requirements.
And hopefully you would be able to create a website
that looks like the goal image.
Pause the video now and complete this challenge.
All right, so let's go through the solution together.
Now, the first thing you'll notice
is we've created three divs,
and I've added a paragraph tag into the first div,
so that we can see our padding a bit more easily.
The next thing is we've set
each of the div's height and width to a pixel size,
namely 200 pixels.
Next, I've added a paragraph element inside the first div,
so that we can see any padding that gets added very easily.
And I've set the first div
to have 20 pixels of padding all around
with a black 10-pixel border,
and that you can see under here.
Now, notice how I've used different IDs
for the different boxes or divs,
and this way I can uniquely identify each div
and set different styling to them.
Next step, I've targeted the paragraph element,
so that I remove any of the margins that go on it
because if we preview our solution
and open this up inside Chrome,
you can see that by default,
each paragraph element actually gets one em of margin
at the start and the end.
So if I cancel this,
you can see how it pushes that away from the containing div.
So we wanted to add the zero margin
so that we would have it centered
and it would not be affected by its default styling.
Next, we had you set the second div
to have a 20-pixel border, top and bottom,
and 10-pixel border left and right.
And if you remember from the lesson,
this is achieved through that multi-value method
of setting border width.
So the first value is top and bottom,
and then after space,
we have the second value for the left and right.
And even if you hover over this,
usually, VS Code is quite helpful
for pulling up the MDN reference on this
and it tells you how the rules work.
So that's a quick tip.
Finally, we set the third div to have a 10-pixel border,
and I wanted you to set the margins,
so that they would each touch corner to corner.
Now, that could be done either by trial and error.
Alternatively, you can also work it out
because if you think about this first div right here,
it's got a width of 200 pixels.
So this part is 200,
but in addition,
it's also got a border of 10 pixels all around.
So then we have to add 10 and 10 here.
Now, that takes us up to 220,
but in addition,
remember that we added 20 pixels of padding all around.
So then there's 20 here and 20 here.
So then, if we add it all up,
200 plus 20, plus 20, plus 10, 10,
that ends up with 260 pixels.
So then we know that we have to push this second div over
by 260 pixels,
and we can do that using the margin left setting,
which is how we managed to push this box over.
And in a similar way,
we can work out how much to push this third box as well.
I hope this challenge
was sufficiently challenging enough for you,
but don't worry if it's not
'cause there's way more challenging layouts
that are coming up in the rest of the course,
and you're gonna be able to flex your box model muscles
in the coming sections as well.
But once you're ready
and you've reviewed your code and fixed any errors,
head over to the next lesson
where we got the final project for the section.