Now we’ve seen before that every single HTML element on screen is just treated as a box by our
CFS and by styling that box by changing its height its with 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 CSSA rule that targeted all the images on this I love Baycon Web site
to say that it should have a width of 100 percent.
All not 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 the SS 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 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
Now you say that the board is going to be a solid border using the SS 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 board size to say that the border with should be 50 pixels all round so that 50 pixels on every
So now the width of this entire element is actually much wider because in addition to 300 pixels with
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 with four or four sides you can override that border by saying specifically
that the board top should only have zero 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 with starting at the top is going to have zero pixels at the top 10 pixels at the right.
Twenty 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 Octave or in our books.
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 with 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 onscreen.
So say if I had another element on the right the margin gives that 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 H.M. 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 HDMI 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 as no margin no board and no
padding but it has a width and a height of this amount.
Now if I select the H one then you can see that this actually has a margin at the bottom which is twenty
one point four.
And that’s what’s pushing it away from this paragraph element but the paragraph element also itself
has some values.
For example is 16 pixel margin at the top and the bottom.
And if I highlight this margin pot on the box model then you can see it show up highlighted in orange
on our website.
Now it’s pretty easy to edit these values using the box model inside Crimm 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 pods 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 left and the right of the screen to push it away from but say if we go back into
action 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 does a class to 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.
So how did that go.
Well just below our first if 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 classic to give it a value so that we can differentiate
Now in this case feel free to use ID or class because if we’re only going to have one top contain a
one middle and one bottom container we want to 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 middle one middle container and the bottom one bottom container.
Now we have three different divs and we can now style them inside Aussie SS 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 we’ll be playing it safe.
And as we said these two containers because they don’t have any content then that means they won’t have
many dimensions unless we give it to them.
So let’s say that the milk container should have a width of 200 pixels wide and a height of 200 pixels
So now it’s a box and I’m just going to copy and paste that over to the bottom containers.
Well now if we hit save and we take a look let’s get rid of this.
Then you can see that we’ve got our top div over here a red square and a blue square all showing up
Now if we right click and pull up the chrome developer tools one small 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 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 or 4 edges and you can see that this hasn’t changed the
height or with 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 pot 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 height and 260 pixels wide.
Now what if I add a little bit of margin to this that say we have a 10 pixel margin around all four
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 with 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 on the painting 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 and I’ve got a challenge for you I want you to use the chrome developer tools.
So don’t edit the styles inside Atun but instead just make temporary changes to the website 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 margin’s padding border whatever it may be in order to achieve
So pause the video now and give it a go.
So what you might realize is that this involves a little bit of math.
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 CSSA 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 that we got.
We’ve got all square.
So we now have three squares but we need the first one to have a 10 pixel border.
So border solids and let’s give it 20 pixels of padding around or four edges.
So onto the next part our middle box is red and it has a 20 pixels 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 it’s with is calculated by all of these numbers.
So it’s 200 pixels in terms of the content then 20 pixels either side.
So at 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 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 Borda 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 Borda padding and width together.
And this one has a content of 200 pixels wide and has no padding but it has a 20 pixel border left and
So in total that’s 214 with 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 1 500 pixels margin left then you’ll see that the corners now or touch each other
and we have exactly the same design as we’ve got over here.
Now how did that go wrong if that was confusing at all.
Then make sure you play around more with the chrome develop tools either through changing everything
in the box model here or by adding in new style rules through the CSSA inside Krown 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 of 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
Now in the next lesson we’re going to talk about the CSSA 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.