Hey, guys.
In this lesson, we're going to talk about some other really important CSS properties and they're ones that
you might have 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 300px, we can change that height to allow our element
to take up more vertical spacing on the web page,
and when this happens, it pushes the box of any other elements lower on the web page.
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 gotten 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 10px to 30px, 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 around 30px 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 0px 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 it 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 one and three,
and then it sets two and four.
For example, if my border width, I had set to 0px and 20px, then what that would do
is it would set two and four, which is the left and right, to 20px , and then it would set one
and three to 0px.
This then becomes top and bottom
and then we've got our left and right.
Now, another property I want to 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 30px
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 20px.
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 the screen is the margin.
So in this case, we've added a margin of 10px 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 20px because it's 10px
from this side and 10px from this side.
And it adds this 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, 100px, 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, 100px, 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 100px, 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 will set as a 10px solid black, then you can see
how that padding goes to a different place versus where the border goes.
And this box model is going to 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 one, two, three and four 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 10px and 40px, 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 10px, 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 in 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 going to 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're 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 going to use everything that we've learned and put it all together in this exercise
where we're going to write some code and apply our knowledge.
Go ahead and download this zipped 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 TODOs.
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 20px border at the top and at the bottom, but then only
a 10px 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 going to 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 going to leave you to pause the video and go through each of these requirements and hopefully you
will 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 divs, a height and width to a pixel size, namely 200px.
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 20px of padding all around with a black 10px 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 1em 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 20px border, top and bottom and 10px 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 the 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 10px 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 200px, so this part is 200.
But in addition, it's also got a border of 10px 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 20px of padding all around.
So then there's 20 here and 20 here.
So then if we add it all up, 200+20+20+10+10, that ends up with 260px.
So then we know that we have to push the second div over by 260px and we can do that using the
margin-left setting, which is how we manage 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 are coming up in the rest of the course and you're going to 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've got the final project for the section.