Original subtitles

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

or 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, a 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 off that element.

And so that is that red or that orange overlay. Now right?

And now the header itself, you see the green space there,

that is the padding.

Okay.

So you'll 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 the styles,

we can see the box model.

Right?

And so here we see that indeed,

there is padding of 20 everywhere, so on all four sides.

So this one here is actually the width and 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 now 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 sides, we can do that also just very easily.

So let's say we want a 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 sites,

we can specify two values.

And if we do that, then the first value will be padding

on the top and bottom.

And the second value will be 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 quote 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,

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 less 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'll 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 there's 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 viewport, 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 shows us here, in this tool tip.

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 to 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 shorthand.

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

a 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'd 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 occupied 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, like 40 pixels here.

Then we might've 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 article and 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 that 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 nasty 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 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 height and width.