Instructor: In this video,
let's start applying the box model in practice.
And in particular, margins and paddings.
And let's start with padding.
And one great candidate for adding some padding
is this header element here,
which has this background color.
So an element which has background color
can always use some padding in order to create some space
between the content and the outside of an element.
That's because remember, padding is basically
just space that is inside of the element.
So this element is called the main header,
and I think we have it somewhere down here.
And indeed, here it is.
Now actually what I want to do, is to take this code here
which is for these boxes, and put it a bit more to the top.
So I like to have like these big-level boxes.
So boxes that contain multiple
child elements more at the top.
All right? So this header here is kind of the first
of these big boxes.
And so I will put it here right after the body.
All right.
But now let's start by adding some padding.
So we use the padding property,
and then we need to specify some length.
So let's use 20 pixels.
And so pixels is exactly the same unit
that we also used for the border width
and also for font sizes, remember?
So let's see what that looks like.
And indeed, we now got ourselves some new space
that is between the content.
So between all of this,
and of course the outside of the element.
Now it looks like the space here is the same as here.
So it's 20 pixels, but then here there's a lot more space.
So let's right-click here on this element and inspect.
And so here you see the reason for that.
So when we hover over an element,
we actually get the margin of that element.
And so that is that red or that orange overlay.
All right?
And now the header itself,
you see the green space there, that is the padding.
Okay? So you see that in fact the padding
goes all around the box, or all around the inside of the box
and it is really 20 pixels everywhere.
Okay? So we will fix this margin here in a second,
and by then everything will make sense.
Okay? Now, actually down here in these styles,
we can see the box model, right?
And so here we see that indeed,
there is a padding of 20 everywhere.
So on all four sides.
So this one here is actually the width and the height,
then the padding, then the border, and then the margin.
So for each element, there is a complete representation
of the box model right here in the dev tools.
And many times this is extremely helpful.
So we will use this for sure a bit later.
Now this padding here does create the same padding
on all four sides of the box.
But if we wanted to create different paddings
on different sites, we can do that also just very easily.
So let's say we wanted different paddings
at the left and right.
So we can say for example,
40 pixels on the left and on the right.
And so this is in fact exactly the same thing
as with the border.
So remember with the border, we also have border top,
border bottom, left and right.
Okay.
And now indeed there's a lot more space here
on the left side than on the bottom.
And the same here on the right side,
even though we cannot really see it by the content,
but we can see it here using the dev tools, right?
So you see that here on the right,
we have 40, 40 on the left,
and then 20 on top and on bottom.
All right?
But now we can actually write this
in an even better way by using something called
a shorthand once again.
So a shorthand is always when we specify multiple values
here for one property.
So for padding, what we can do is to instead
of just specifying one value
which will then be the same on all four sides,
we can specify two values.
And if we do that, then the first value will be the padding
on the top and bottom,
and the second value will be the padding
on the left and right side.
So to achieve the same result as before,
we would say 20 pixels and 40 pixels.
And so if we now removed this code here
like this using a comment,
then our result is still the same.
Okay? So we use this shorthand to add 20 to top and bottom,
and 40 to left and right.
And this way we don't have to write all
of these different lines of codes here.
We can just do it all in one go.
Next up, let's play a little bit with margins.
And remember that margins are basically spaces
between elements.
So let's now add some space between the li elements.
So these ones here.
You see that they're very close together,
and it doesn't look nice
and therefore we can add some margin
to the bottom of each of these elements.
So somewhere down here, there must-
Yeah so there is the li already,
so we don't need to select it over and over again.
We just write it here inside the same rule.
And so let's say margin to the bottom 10 pixels.
And so now that does look a lot better, right?
Let's select this here.
And indeed we get 10 pixels
at the margin bottom on each of them.
Just scroll to the last one because now
I want to show you something.
So usually in the last list item,
we don't want to have any space.
Because we actually only want space
between the items but not at the end of the items.
So again, the last one should not have any space.
And so let's use a trick for that,
which is actually something that we learned before.
So we can say li and then last child.
And then here we basically reset what we just did.
So we say margin bottom and set it to zero.
And whenever we use zero, we do not specify any unit, okay?
So we just say zero, and that will then override it.
And now that space that we had here before should be gone.
So you see this one has no margin, but the one before it,
that does have these 10 pixels at the bottom.
Nice, that's beautiful.
And we will now keep adding more and more margins
and paddings to all of our elements.
But before we do that,
we should actually do something called a global reset.
So if you take a look at our page here,
and let's close this, then you notice
that there are actually already a lot of spaces here, right?
So their space around this H2 element here
between the paragraphs also here,
as we saw before using the dev tools,
there was a lot of margin on the top and bottom of this H1,
and having all of these default margins and paddings
makes it quite hard for us to style our page.
So what we want to do is to reset
all those margins and paddings,
and basically set them to zero.
So how do you think we can do that?
Do you think we should use inheritance?
So do you think that margin and padding get inherited
from one element to the other?
Well, let's test and set the margin to zero.
So let's see.
And well, something actually did change.
So the body lost the margin that it had.
So now everything is really like glued to the border here.
So to the border of the view port.
So the browser itself,
but not all the elements lost its margin, right?
And so this is not really the way to go.
Because margin is not a property that is related to text,
and therefore it's not a property that gets inherited
from parents to child elements.
Instead, if we want the margin to be applied
to every single element,
then for that we can use the universal selector.
So margin set to zero and padding set to zero.
And now this is exactly the result that we were looking for.
So now all the default spaces are gone,
and we are free to format our page as we wish.
And doing something like this here,
so this kind of global reset, is extremely common.
So this is usually the very first thing that I do
whenever I start any new project.
And also keep in mind that this margin and padding here,
are extremely easy to overwrite.
So every other selector will actually
overwrite this universal selector.
And in fact, we can see that right here
in the main header where we did specify some padding,
and so of course, it is still visible here.
Okay? So once again, this class selector here
has a higher priority than the global selector.
And in more technical terms,
we say that the universal selector
has a specificity of zero,
which is what VS Code chose us here in this tooltip.
While on the other hand,
this selector here does have the one in one of these places.
So this one is more specific, it has a higher priority,
and therefore the padding does get applied.
And the same is true also right here in this list.
So here we also already should have the 10 pixels
that we just specified previously.
Okay. And now with this reset in place,
it is extremely easy to now add our custom spaces
and make this page really look designed.
And since we're already here, let's actually start here
with the aside or keep going here.
Because once again, this is one of the elements
which has a background color.
And so therefore, in order to create some space
we should use padding because otherwise,
this border here is really glued to the content.
So that's not what we want.
So let's say padding top of 50 pixels
and padding bottom of also 50 pixels.
Let's give it a save, and that looks a lot better.
So for now, we're leaving left and right side at zero,
and we will fix that a bit later.
So how could we write this here
actually in a bit better way?
Well, I hope you guessed it,
and the answer would be to use the short end.
So just padding at the top and bottom,
which is the first value of 50 pixels,
and the second value is left and right where we want zero.
Now that's it.
So take this out, give it a save,
and it still does look the same.
Now, okay.
Now let's go up to the top of the page.
And now here we probably need some space
between this header and this H2 element here, right?
So this looks very bad,
and so we need some space outside of this element here.
So between these two,
and for that we can use a margin bottom
below basically this header element.
So let's come here to our main header
and at a margin bottom of, let's say, 60 pixels.
And it is in fact very common
to use mostly space at the bottom,
in order to create vertical space.
Okay? So just stick to either margin top
or always margin bottom.
So one of them is fine, but it's best not to always mix them
when you want to create space between elements.
And personally, I really like to use margin bottom.
It makes a lot of sense in my mind to do it like this.
Okay? And let's keep going
and maybe add some space now below this H2.
So H2 is right here.
So let's say a margin at the bottom once again.
And here we just use 30 pixels.
And again, these values here are quite random.
And later we will use a system
to automatically basically create these values for us.
Next, let's create some space here between this part.
So basically this image and then the rest of the content.
And if we take a look at our markup,
that part, so this image, this author,
and this other image here is this header.
So let's add some margin bottom to this header.
And so I'm giving it another name.
So this one is the main header,
so let's call this one here, the post header.
So let's copy that here.
Put it here.
And then margin bottom of 40 pixels.
So that's a lot nicer.
Next, I want to think about the paragraphs,
because, well, this looks very messy right now.
And so just by adding some space
to the bottom of each paragraph,
that will make it a lot better immediately.
So margin bottom, and let's try 15 pixels here.
And indeed, that is a lot better already.
Now, the same with these lists.
So now here in this ordered list
and this unordered list that we have here,
now actually the numbers and the bullet points are gone.
And that is because we actually need some space
on the left side so that they can be shown.
So let's add them back because our global reset
basically removed all those spaces, remember?
So we want that space in the unordered list,
and also in the ordered list.
So let's say margin on the left side, for example, 50 pixel.
And so now you see that they are back.
So everything moved 50 pixels to the right.
And so now the one, so the numbers and the bullets are back.
Let's also add some space to the bottom.
20 pixels.
Okay? And now let's move on to the H3.
So that's this one here.
So margin bottom, 20 pixels.
And something is wrong.
I cannot spell margin, apparently.
So that looks a lot better.
And now we also need to specify some distance
between this text here and this heading.
So right now it looks like the space
between these two is exactly the same, and that's not good.
And I'm actually doing this
because I want to show you something.
So I'm gonna specify the margin top now
and set it to 40 pixels.
Okay? Now, that works beautifully.
However, let me now show you something using the dev tools.
So I'm inspecting this element.
And so you see that there is exactly the 20 pixels
that we specified to the bottom,
and the 40 pixels that we specified to the top.
However, this paragraph that comes before it,
actually also has a margin to the bottom
of, I believe, 15 pixels.
So this one, right?
So right now, this element here has 40 pixels to the top,
and this one has 15 pixels to the bottom.
And so both of these spaces occupy this area here, right?
And so we might intuitively think
that these two spaces do get added up.
So basically that these 15 pixels here will get added
to the 40 pixels that come from here.
But in fact, that is not what happens.
So we see here that in fact,
the distance between the two elements
is really just 40 pixels.
It is not 55 pixels, okay?
And this phenomena is called collapsing margins.
So basically when we have two margins
that occupy the same space,
only one of them is actually visible on the page.
And that is usually the larger of the two.
So for example, let's say
that we specified even like 40 pixels here.
Then we might have thought
that this was actually 80 pixels here.
So following the same logic from before.
But of course, it is still only 40 pixels
because of the collapsing margins.
But what if we had like 100 pixels here?
Well, then now the space here would in fact be 100 pixels.
So exactly this orange space
that you see right there, right?
So this one now still has its 40,
but this one has a hundred.
And so now the space between them is still not 140,
but it's these hundred pixels of the bottom of the P.
Okay? So this is what we mean
when we talk about collapsing margins,
which is something that you might hear
once you start hearing people talking about some CSS
weird quirks or like weird stuff that is inside of CSS.
Okay? And but this,
I think we are basically almost done already.
Let's just add some more space here
between these related posts and all this content here,
which is the article, right?
So we have the article and yeah, the aside.
So we need some space there as well.
And I don't think if I already
selected the article anywhere.
And it looks like I didn't,
so let's put it at the top.
And since I'm here, I will grab this nav,
and put it also at the top,
because it's one of those bigger elements.
So I like to keep them at the top.
And of course, the same goes for the article.
So article,
and a nice margin bottom of 60 pixel.
Okay? And here we go.
That's it.
That's our page nicely formatted
in terms of margins and paddings.
So just to quickly recap,
whenever you need some space inside of an element,
which is very useful
mostly when there is a background color
or a border on the element, then you always use padding.
On the other hand,
in order to create space outside of an element,
or also to create space between multiple elements,
always use margin.
And in case that you need to add vertical space,
then I advise you to most of the time
stick to margin and bottom.
And so basically, that's it
about adding space to our page elements.
And in the next lecture we will then also add dimensions.
So heights and width.