Original subtitles

Let's now see how we can run into problems

with the default box model, and also how we can fix it.

So what we're gonna do now is to finally fix the spacing

of this sidebar here a little bit.

So currently, there are no paddings, as you can see here,

and this is just a margin, but not a padding.

So that's not really right,

so let's fix it and then we will run into a problem

and then we will solve it.

All right?

So we are actually done here with the code of the layout.

So let's go to the aside that we have at the top,

because this code we will write now should actually apply

to all the layout methods.

So let's get rid of these comments here

and also of this width,

because we already have it defined by the end of the file.

So let's give it a save.

And now actually the reason why there is some space here

is because right at the very beginning,

we added some margin here to the ul,

so to this unordered list,

because otherwise the bullet points disappeared.

Remember that.

But now we actually don't want that here.

So there should be no margin

because that just doesn't make no sense in that case.

So here we have that ul and that ol.

And so here's the margin left of 50 that I just mentioned.

So let's see in our HTML, if this list here has some class.

Yeah, it does.

So it's the related class.

So let's copy that.

And maybe it's already somewhere.

Yeah, here.

So related has a list style of none.

And let's say that it should have no margin.

Okay.

So in the ul selector, we have margin left set to something,

but we can override all the margins at the same time.

Left and set it to zero.

Okay. So that's better for now.

And so let's now go back and add some padding.

Right?

So when we want space inside of an element,

we should not use margin.

And so that's why we just remove it, but we still,

of course, want some space inside of this aside.

And so therefore we will want to add some padding.

So, let's say 40 pixels.

And now, as I saved this, watch what happens.

So I'm saving it now and now it suddenly disappeared.

So the whole site is gone.

So let's see what happened.

And the reason for that is

that now the elements became too big.

So let's inspect that.

And so

checking the site.

So we defined it at 300 pixels of width, right?

But then the padding of 40 pixels that we just added

gets added to the total width,

simply because that is the default behavior

of the box model.

And so now the total width of this element is 380,

which does no longer fit between the width of this article.

So the article is 825 pixels wide.

And if you watch closely up here in this corner,

as I now hover it,

you see that it is a bit wider

than there would have been space to fix the aside.

Right?

So, how do we fix this problem?

Should we now manually change the size of this aside here

in order to account for the padding?

Or is there maybe another way?

Well, indeed there is a better way.

And so now it's time to leave behind the default behavior

of the box model.

And so let's now quickly take a look

of how the other version of the box model works

and what it looks like.

And just to remember,

this is the default way of the box model

of calculating the elements widths and the heights.

So as we've seen in practice, many times,

whenever we specify a height or a width,

then the box model will add the border

and the padding on top of that.

And so that's exactly what created the situation

that we found ourselves in now on our page.

So in our layout, right?

So the sidebar grew too big because of the padding.

And so it no longer fit close to the article.

So wouldn't it be nice if we simply defined a certain height

or a certain width,

and then the element would simply be exactly that size,

no matter what border or padding?

Well, actually of course

we can do that simply by adding a little property

to the element, which is called box sizing.

And we set the value of that property to border-box.

So that's a nice and simple trick

that actually every single CSS developer uses.

So it would be completely impossible

to build large layouts

without using box sizing border box.

So again, the default way of the box model

actually doesn't make any sense at all.

So instead everyone simply adds box sizing,

border-box to all elements,

which will then forever fix the kind of problems

that we just experienced.

So as we can see in this new diagram

where box sizing has been set to border box,

now the specified width and height goes all the way

from one side of the border

to the opposite side of the border,

including of course the content area and the padding.

And so now the final width and height calculations

are very simple.

There's actually nothing left to calculate.

So the final width of any element will simply be

exactly the width that we define in our code,

no matter the padding and borders.

And the same of course goes for the height.

So if we now define some paddings or borders,

they will not get added to the dimensions of the box,

which really makes our lives so much easier.

Now, what this also means

at the same time is that padding and borders

that we do specify will not reduce the inner width

of the content area, but that's usually not a problem.

Okay.

And so now let's go back to our code

and actually apply this property.

Okay.

And so let's now do exactly what I showed you in the slide

and set box sizing to border box.

And by the way,

the default behavior is actually called content box.

Okay. But of course what we want is border box.

And so if we save this now again,

we should see that problem fixed.

And indeed.

Now it works.

So if we check out our box model, now,

of course the entire site,

then you'll see that the width of the content area

is no longer the 300 that we defined,

but instead the entire width of the element

is this 220 plus 40 plus this 40,

which if we add it all together,

that makes exactly 300 pixels,

which is the width that we defined

for this element right here.

Okay.

So that's exactly what I was saying by the end of the slide

I just showed you,

so that when we add some padding to an element,

then that will subtract from the content area.

Right?

And so again, the width of the content area is now only 220,

but that's not a problem at all

because what we're really interested in

is the width of the entire element itself.

And so that is now exactly the 300

that we specified,

because otherwise, let's just toggle it off one more time.

Then you'll see down here

that we are back to having the 300 applied

to the content area

and then 40 on each side on top of that.

So that's not what we want

and so here we fix that.

Nice.

Now we always want the box model to work like this

by default on every single element from here on.

And so basically what we want is for this property here

to be applied to every single element on the page.

So how can we do that?

Well, I will cut it from here

and then I will put it here in the universal selector.

Okay.

And I'm not putting it here in the body

because box sizing is not one of these properties

that gets inherited,

so we can't put it on the body selector,

but instead on the universal selector.

And so now along with margin and padding,

this box sizing border box gets applied

to every single element.

So I'll give it a save and it still works.

So something like this here is

what most developers actually add to their CSS.

So a simple global reset like this,

and then basically enabling this better behavior

of the box model on every single element.

Okay.

With that we're actually done.

I'm just quickly going to add some margin here to the bottom

of this h4,

since we are talking about fixing spacing.

Margin-bottom, let's say 20 pixels,

or let's make it a bit more and say 30 pixels.

Great. So you just learned one more very important thing

on your journey of becoming a CSS developer.

So what I just showed you again,

is something that every single CSS developer does and uses.

And so it was really important

that you learned about this important trick.

And it's also important

that you really understand how it works.

So make sure that you maybe review that slide

that I showed you and review the code that we wrote here,

and then you are ready for yet another coding challenge.

So hopefully I see you there very soon.