What is the CSS box model?
We know a lot about HTML elements already,
and we know that with the help of CSS selectors,
for example, the type selector,
we are able to change the style of our elements.
Now, CSS has a specific way to
interact with these elements and
to refer to different parts of an element
because CSS thinks
about elements in a way that each element-
each elements CSS
can interact with, of course,
is surrounded by different boxes.
So you could say different layers, different parts,
which define the styling,
the position and the lay out of this element on our website.
What does this mean?
Well, an element has the content, so to say.
The content is just a space,
the actual, well content often element needs
in our project here.
This will be the space required here for the text for our
today's challenge.
So this is basically the content of this element.
Now turns out that we need more than this content part,
if we want to have a proper looking website.
Besides the content we have, the so-called padding.
The padding is the space. The content gets between, well,
the content itself. And so to say the borders of our box,
if we go back to our project
and into our code and
here to the anchor tag,
we could add some padding maybe up here.
And let's say,
we want to have a padding of 12 pixels.
With that, our text gets more space. You can see it here,
but space between the content and the end of that box.
So often element it lies inside. The experts call it
the box model as this is kind of a box, so to say.
We are not done with the padding though.
There is more related to such an element,
which makes it well such a box in the end.
And this is the border we know about the border already.
We use deported radius, for example, in our project,
if you're going to go back to our anchor tech here,
we have set the border radius,
which allowed us to have these rounded corners,
but we can also set the border property,
the border property, well,
simply written like this has three core definitions.
One is the width of the border. For example,
one pixel leader to have a really thin border.
Then the type of border,
this could be a dashboard for example, or a solid border,
which would just be a solid line.
And then we define the color of the border.
Now our case,
the border should have the same color as the background.
So we use RGB and now
1, 6,
7,
1,
and 7, 8.
With this in place, if we go back
we obviously don't see a big difference because the border
has the same color in our case,
but you could of course change the color property here in
the developer tools.
If you would, for example,
increase the size of the border to eight pixels and maybe
take a yellow tone here for the color.
Then you see that you have this border around here,
not what we need at this stage,
but you can still see you have the content,
then the padding, and then the board around here.
Let's reload to get rid of this change.
With that, we are almost done.
There is just one last thing missing to finish the Spock's
model concept. And that's the so-called margin.
The margin now is not related to the actual element
in a way to the content, the way it is displayed.
It's just a space.
This element needs related to other elements or the limits
top, left, bottom, right of our website.
So if we say that the space between these elements is a bit
too big,
maybe then we can go back to our page here to the H one
selector.
And then we can say that we add the margin property like
this. Let's say we give it a margin of 12 pixels with this.
You see, now the space here is reduced.
So that's the core concept off the CSS box model, content,
padding, border, and margin.
And if you think about another element, well,
it would follow the same pattern.
You have the content here and then patting border margin.
And as you see,
the margin defines the space between these two elements.
Now we'll use these properties already in our project now,
but there are a few more things to keep in mind when working
with these properties here.
Let's say our HTML code is just this paragraph.
And we want to style these different properties here.
Then you would go into CSS,
use the paragraph type selector and add the padding.
And as you see,
I didn't add the padding with one single value here,
but with four different values highlighted with different
colors, because for the padding and the margin,
we have four areas. We have to distance to the top,
to the right,
to the bottom and to the left for the content and the
border. We obviously don't have that.
Therefore you can define the padding for each of these
single directions.
So you can think about this clock here.
You always start from the top.
So this defines the padding between the content and the top
of the corresponding element.
The second value is the distance to the right
forefront to the bottom
and the forefront to the left.
As I said for the border,
while we don't have this differentiation,
you simply define the border size then the border type
and the border color.
For the margin, for example
we can follow this pattern, but it's a different one here.
We only have two values now.
Because we can, of course, define the value for each of
these single direction, so to say,
top, right, bottom, and left;
or we can define the distance vertically and horizontally.
Here, the first value would be the distance: top and bottom.
The second value would be the distance: left and right.
And finally,
we could also just use one single value as we just did it.
This would mean that we have the space of eight pixels for
all directions top, right, bottom, and left
With this new knowledge gained,
we can now go back to our project and improve the styling a
bit more, because let's be honest,
this doesn't look too pretty at the moment.