All language subtitles for 044 The Box Model of Website Styling.en_US

Now we've seen before that every single HTML element on screen 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 on screen.

So for example if we specified a CSS rule that targeted all the images on this I Love Bacon web site

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 percent,

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 percent and that refers to 100 percent of the viewport.

Now the viewport is just the screen that you're viewing the web site on.

So that could be a laptop screen or your mobile screen or your iPad screen, but this will expand to 100

percent 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 3

pixel border show up around your element.

Now remember that this border doesn't encroach on the size of your element.

So if it's 300 pixels by 300 pixels, 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 50 pixels 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 50 pixel border on each side, and the entire thing now takes up 400 pixels.

Now instead of specifying a border width for all four sides, you can override that border by saying specifically

that the border top should only have 0 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 0 pixels at the top, 10 pixels at the right,

20 pixels on the bottom and 30 pixels 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 have some content in our div or in our box.

Now let's say that we have some text, for example. The first thing that you 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 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 20 pixels 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 had as no margin, no border and 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 it has a 16 pixel 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 web site.

Now it's pretty easy to edit these values using the box model inside Chrome Developer Tools, and that

allows you to quite easily visualize what each of these things are doing.

So for example say I want to give a little bit of padding to the content inside my div then I can double

click on this padding and I could say maybe 20 pixels from the top and 20 pixels 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, lets give it a 20 pixel padding all around, all four

sides. And you'll notice that the background color 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 20 pixel margin all around our div.

Now the parts that have the background color 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 gives them each a different background

color, 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, the 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? Hit save.

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 of padding around all 4 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 10 pixel 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 high 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 or this current div.

Now here's a web site 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 talk 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 I've included a link to this web site inside the resources of this lesson.

And you can go here and just have a play around and get to grips with this idea.

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 web site so that

you can change the margins, the borders, the paddings.

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 Maths.

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 10 pixel border.

So border solid, and let's give it 20 pixels of 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 20 pixels 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 200 pixels in terms of the content then 20 pixels 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 things 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 color 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 10 pixels 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 260 pixels wide, calculating

adding all of these border padding and widths together.

And this one has a content of 200 pixels wide and has no padding but it has a 20 pixel border left and

right.

So in total that's 240 in width, so 240 plus 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 500 pixels 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 at 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 web site 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 on screen.

So for all of that and more I'll see you on the next lesson.