With the theory out of the way,
we can now apply our new knowledge about the box model
to our project. For this I'm back in the code.
And I would like to get started with our
H one element up here.
We applied a margin of 12 pixels,
so we use the single value here.
This means a margin of 12 pixels is applied to the top,
the right, the bottom and the left.
And I don't think we need this margin definition here
because back in the project,
if we use our Def tools and go to the H one element,
you see the box model indicated in the browser here,
the blue part is the content,
and the orange part is the margin.
If we use our inspect option here,
we can also navigate right here until you see better.
You can also find the box model in the dev tools,
by the way, are very great help for in such cases.
If we go to our styles tab again, right here,
selecting the element and then scroll down further and
further, we can see, well, our box model,
as explained on the slide previously in the center here,
you can see the content also highlighted blue
in the browser window.
Then we don't have any padding or border for this element,
but we have the margin with 12 pixels all around.
The margin all around, as I said is
not what we need in here.
I think we need the margin to the top and to the bottom,
by the way,
this overlap here of the margin to the next element is due
to the so-called margin collapsing.
We will explore this a bit later in the course.
So for the moment we will just ignore this.
Just want to make sure that we are aware of the fact that
this is happening right here.
However, as I said,
a margin to the top and to the bottom would be enough
to give our element a bit space,
but the left and right margin is not required.
The centering happens due to our body element here,
having the text align property applied.
And as we learned text align center centers
the content inside of an element. So in our case,
the text is part of the H one element,
which is part of the body.
Therefore it is centered.m So long story short,
we'll go back to our code and changed as 12 pixels here to
12 pixels, zero. So 12 pixels margin, top bottom,
zero margin left and right.
Saving this and going back well
shows us that now this margin to the left
and to the right is gone,
as you can see it here, the element is still centered
as explained previously. Let's go to the next element here,
and let's maybe stay here in a dev tools to show you this in
a bit more convenient way.
Here, Our anchor tech has a padding,
so no margin here, but a padding.
So it's this space between the content and the actual border
of our elements. So to say, if we scroll down again,
you can also see this here.
We have the content, then we have the padding
and we have a slight border added here.
So this part here is okay.
I just think we need a bit more padding to the left and to
the right to give this element, well,
a better look. Therefore, if we go back to our padding
and here we add a space again,
as before no commas or anything like that.
And here we could give it a margin of maybe 48 pixels.
As you see, for our values we use pixels here.
So we use the unit for the zero value.
This is not required because well, zero is zero,
no matter with the right pixels or zero,
just as the plain number here. Let's go back.
And yeah, I think now this looks better already.
The space between our H one and the anchor tech
is something we'll tackle a bit later.
The next part of our page that I would like to tackle with
our box model logic is the order list here.
The order list here has no specific property of our box
model applied.
All these properties and values are added automatically.
If we inspect the code here and scroll up,
you'll see that all these rules here are applied by default
by the browser for our order lists.
So we didn't specify anything.
This is a bit of a problem here,
because if you close to inspect our element,
maybe like this, it becomes evident,
or maybe let's use this logic here.
So if you inspect it like this,
you see that the element is not really centered.
Specifically, the list items here are kind of off,
so to say.
We can change this quickly
with a little bit of a trick when
it comes to centering elements.
Centering here is not related to the text align center rule,
be applied to the body element.
This referred to centering the content,
text content of an element. Here,
we want to center the actual element. For this,
we have a little trick and this trick can be
applied here in our ordered list element.
And there,
I know first one to give our list a specific width.
So let's say we give it a width of maybe 500 pixels.
Let's do this.
Now we see that the centering is a real big issue here.
You see it's totally off,
but now we have specified that right here.
Our total element has this predefined width.
So to unselect this, you see, we have bigger.
Now. It becomes smaller and very important,
not because of the width being inherited by our list items.
But the width is, as I said, based on common sense,
not a property, which is inherited,
but if we shrink the size of the containing element,
then the nested elements will also shrink.
If we don't give them a bigger width,
therefore we have this reduced
width here for our list items.
But this was just a step one because now it's totally off.
But if you now go back to the code and work with our margin
property, we just learned about in detail,
I will now apply a margin of 36 pixels to the top.
This gives it some additional space here between our button
and the list.
Then a space.
And then for the distance to the right,
I will apply the auto property for the bottom a distance
of zero. And for the left again, auto.
Now, why auto? If we save this and go back,
you see that under this, that our element
is, well, almost centered.
Now we have to add one additional thing,
but with the auto value for the left and right part of our
margin property, elements can be centered.
So the browser automatically adds the identical space to the
left and to the right of our element.
And therefore it centers this element.
Why is it not perfectly centered though? Well,
this is because if we scroll down,
we have this default padding of 40 pixels here
applied. Here, you can also see our
exact same margin to the left and to the right.
So this is working.
But if we now go back once again and add a padding of zero
here to our element, then you see, we finally centered it.
That's also one of the reasons why
this box model is so important.
It doesn't only help us to define the style of our specific
elements. It also helps us to, well,
the work on the alignment of the elements here,
we center the element with this margin auto rule.
However, we are not done yet,
because I think besides the fact that the list is not
organized in a better way,
the list elements still look a bit strange.
Therefore let's not work on these.
And if we inspect them first, you see, well,
what is obviously missing is some padding here for these
list items. We only have the content and the margin,
but the space between our text and the border of our
elements here is way too small. So let's change this.
And for that, I'll add some padding first,
adding in all directions, maybe have 16 pixels here.
Let's see.
Yep. Looks a lot better already, as I would say.
So this is this box model concept in practice.
It will be a concept which we'll use for building basically
any website in the future and also in this course,
but at this point of the course,
it's time to switch back from CSS to HTML again.