Instructor: 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 wrote right 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 safe.
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
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 and that .
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,
now 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 save this watch what happens.
So I'm saving it now,
and now it suddenly disappeared.
So the whole Aside is gone.
So let's see what happened.
And the reason for that
is that now the element became too big.
So let's inspect that.
And so,
checking the Aside
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 white.
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've 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 calculating the elements
width 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 board or 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 now 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 not 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 Aside, then you 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 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 boarder box gets applied
to every single element.
So give it a safe 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.
Now, okay, with that we're actually done.
I'm just quickly gonna add some margin here
to the bottom of this
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.