Original subtitles

Hey, guys.

In this lesson, we're going to talk about some other really important properties and they're ones that

you might have already seen if you've been doing a little bit of 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 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,

a nd 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, 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 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.

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 px 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 ten 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 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.