So one of the most important concepts that we have yet to cover and assess is positioning of elements
.
So how do we lay out a page or move a div to the top right.
Or how do we make an anchor tag wider or add spacing between images.
All of that is really important and it's all related to something called the box model.
So the box model is this basic idea that's really central to everything in HD you assess which is that
basically every element has a rectangular box around it.
So we can see here just going to go to any web page on MDA and I have the inspector open and I have
the magnifying glass selected.
And as I hover over every element you can see that there's a box around it.
So this H2 has a blue box around it.
This one has a box.
Even things that aren't particularly boxy.
So this rounded corner div..
It still has a box around it.
Behind the scenes.
So does this here and this one is really not round or not boxy looking to have these rounded corners
but it's still a box.
So these boxes are really useful behind the scenes because we can style different properties on them
.
So there are four properties or four different parts of every box.
There's a lot more properties but for parts of the box that we can manipulate.
So let's suppose that this diagram which is also from MDA and is of a paragraph.
So I have some text in a paragraph and I give it a orange or a yellow border and this is what the user
sees some text and a border but behind the scenes there's actually some other things happening.
So between the border and the text there's something called padding.
So padding is just the space on the inside of the border.
So between the content and the border is padding and then there's also margin which is on the other
side it's between the border on the outside and anything else.
So we use margin often to add spacing between elements.
So if we had two paragraphs and I wanted them to be further apart then I would use margin and increase
that.
So now we're going to do a little bit of a deep dive into actually the syntax of some of the properties
that we want to use before we do that.
I want to just show you two things you can look forward to making the first one of the most exciting
but what is important is that we now have a way of making something that looks like this.
Up until now we don't actually have a way of making these boxes that are connected to one another that
have a with assigned to them but they're empty there's no text inside.
So we're going to learn about the box model and apply that here to make this tic tac toe board and then
we're going to make this portfolio site for a fictional photographer.
So this is nice.
It's images it's responsive so it changes size a change the window size and the grid.
All of this is based off of the concepts you're going to learn here.
So I'm going to go ahead and open up sublime here.
And I have a really simple document that I've created.
So it's just simple HTML.
It has a style sheet connected.
It's empty.
Aside from a few comments and then two paragraphs.
So if I open this up you can see that it's very basic very boring and we're just going to use this to
play around with the box model.
So I'm going to go to my success and I'm going to select paragraphs and then I'm just going to copy
these comments inside so that I can write some code beneath them just to visually tell you what I'm
doing.
So let's start by giving these a border.
So this should be review border and let's do to pixel solid blue save that refresh and you can see that
we get a border all the way around the content.
And what you also notice is that the content here goes all the way across the screen.
Our border doesn't stop right here and that's because when we make a paragraph by default it goes all
the way across the screen.
So if I want to change the width of the paragraph itself of the text I can use the width property and
I'm going to go ahead and give a width of one.
Let's do 200 pixels to start.
And if I refresh you can see we've now changed the width.
If I inspect the content isn't blue.
And then we have a border around it.
So the content is blue.
And on this diagram that is this box right here this element box.
And then we have a border that is directly around it.
There's no space between the border and the content.
One other thing with the width and also there's a height.
So let's do a height of 300 pixels and see we've just added a bunch of space.
I'm going to get rid of that but there's a height that we can use just like with.
We don't have to just use pixels so we can use percentages.
And those are really useful so let me show you.
Let's do 50 percent and you might be wondering what is it 50 percent of.
And the answer is that it's 50 percent of the parent element.
So in this case it's the body that the paragraph is inside of the paragraph goes halfway across the
body.
In our case the body is the entire page.
It was all the way across.
So we end up with half the page.
And what's nice about this if I change the window size it also changes so a lot of people use this and
will use that actually to use in this image grid.
You can see that the images change their width and that's a percentage.
OK so I'm going to keep it like that for now.
And then the next property we're going to talk about is padding and remember padding is this space between
the element and the border.
And right now we don't have any space the borders right on top.
So there's a property called padding and we can give it a number of pixels and let's do 10 pixels to
start.
Save the file refresh.
And now we have 10 pixels of padding on all sides.
So if I inspect now you'll see there's now this green content that's introduced so we have the blue
content itself and then we have the green around it which is between the border and the content so we
can obviously increment this and we get a lot more space on the inside.
But this is not the only way to set padding.
This sets it on all four sides as exactly the same.
But sometimes we only want padding on one side or two sides just like with border.
There are short cuts for the longer version where it's a border top 10 pixels border bottom five pixels
.
Same thing with padding and it comment that out and we can do something like padding left 40 pixels
and fresh.
And we get padding right here.
And that's the only place for padding is.
And I remember the space over here this blue is not the padding that's her actual content that's from
this with here.
So different even though it looks like there's space on the right.
It's coming from a different place.
So another thing that we can do here is play with the margin.
So the margin is a last piece of the puzzle.
It's the space on the outside of the border.
So between elements.
So this is going to be useful because we might want to increment or increase this space right here or
as an example here this space right here in between the images is set using Marjan.
So it actually looks just like padding so we can say margin and let's do something obvious like 100
pixels to start and refresh.
And what happened is we now have 100 pixels of space on all sides of the element on the outside of the
border.
So find aspect.
You'll see that in Chrome that's identified as orange so blue is the content Green is the padding in
Orange is the margin.
So just like padding.
Sometimes we only want to set one part of the margin one side so we can do something like margin top
is 500 pixels.
And then when they come at this one out for now and save and we only get space on the top on the left
there's nothing.
And then more space on the top of this one.
Nothing on the bottom or the left or the right.
So that's margin.
So sometimes we to add values to all sides of the margin but we don't want to have to do it with four
different lines.
So we don't want them to be exactly the same if they are here but we don't all have to say margin top
margin left margin right margin bottom.
So there's another shortcut just like for border.
Or we can do things at once we can do this margin and give it four values.
So the first one is for the top and then the right and then the bottom.
Let's do 500 pixels and then the left
and by doing that we get this nice four sided margin where the values are all different but we only
had to do in one line.
So just to inspect this here and see if we get the 500 pixels on the bottom it the 20 on top we get
the hundred on the left and then we have our 40 on the right.
So there's one last thing that you'll see often with margin which is margin.
Auto.
So what we can do is set the margin to be auto on the left or the right.
And what that will do is actually Center an element for us.
So let me show you how that works.
And the comment this out again and we can write margin and let's just say zero margin on top auto on
the left or on the right zero margin and bottom and auto on the left.
And if I make this full size and refresh you'll see that it centers things for us.
So what that means it's decided that this is 50 percent because we said that here and then it figures
out the left is auto and the right is auto so just does it as much as it needs to do and that will actually
center it for us.
And then we have zero on the top and the bottom so they're scrunched together.
What we can also do there's an even shorter way of doing this and it looks like this margin zero Otto
.
And so this will set the top and bottom to zero the left and right to auto.
So nothing changes and we can also use this syntax if I want to add 50 pixels to the top and auto or
I want to add 50 pixels and 20 pixels.
The one thing to remember is you need the x there unless the number is zero.
So if I do this it adds 20 on the top on the left and the right and then it adds 50 on the top and bottom
.
So let's recap here just one more time.
We've got the inner content which is right here.
We've got padding which is between the borders so all we have is padding left and then we have margin
which is between the border and on the other side.
So between elements basically.
So in the next few videos we are going to apply these concepts and use them throughout this course