Welcome back, everyone, to this lecture on the Castbox box model.
Now, we've seen already that using CSIS, we can specify a border around HTML element.
We can even color and style that border.
Keep in mind, though, this border is actually part of what's known as the CSA box model, which is
a group of edges surrounding the actual HTML element content.
So, for example, let's imagine you have some content.
This would just be the raw text.
For example, if this was a paragraph tag, it could say something like Hello world.
Then around this content, you actually have padding that you can define.
Then after the padding, you have the border.
Last time when we were actually editing things like the border color and maybe the border styling,
we were actually editing this part of the CSE's box model.
Technically speaking, we could have ad spacing between the content and the border by editing the padding
in the CSE's box model.
And there's also what's known as margin beyond the border.
So you have a lot to play with here.
You have the content, the padding between the content and the border and then the margin beyond the
border.
And this is a box model that can then help separate out edges of each HTML elements on the page.
We should also note that they don't have to grow in equal distance in all directions.
You can actually specify the left to right or top to bottom padding border or margin surrounding a piece
of content.
OK, let's check out this box model in Visual Studio code.
All right, here I am inside Visual Studio Code Editor.
As a quick note, you may want to do a quick Google Image search of CSV box model so you can easily
follow along with what I'm referring to.
Main thing to remember is that Echo's content than the padding than the border and then the margin beyond
the border.
OK, so now that we remember that, let's go ahead and create two headings.
Going to create heading one and this is going to say up.
And then I'm going to create another heading, and this one's going to say down.
And then what I'm going to do is I will assign each of these a unique ID.
So this will be up that way.
I can refer to it in the CSIS.
And this idea is going to be equal to them, so we'll say it is equal to them.
All right.
So let's go in and save those changes I have up and down, you already know, is there some spacing
between them, which is kind of interesting.
We'll come back to M. Assess.
And let's grab those IDs, member IDs or hash tags in the CSIS we have up.
And then we also have the.
OK, so we have up and down, and now let's go ahead and begin starting to play with the idea that I
have borders, margins with padding, text alignment, et cetera, to make it clear what's going on.
I'm going to add in some text alignment.
So I'm going to say text align and we're going to set the sequel to center.
So they're going to be centered within their little boxes there.
And I'll do it for both.
That way, it's kind of clear or hopefully more clear what's actually happening.
OK, so we have text align center.
Remember, as I begin to play around with this window, I can see the text alignment stays in place.
It stays at the center of that browser.
Next one I want to do is add in the border.
Remember, I have the content that I'm going to have some padding that I have the border and then I
have the margin beyond the border.
So I'm going to say border.
And you could define border, top border, left border, right with style, color, etc. But there is
this shorthand border, and what the shorthand allows you to do is quickly specify the line with the
line style and the color.
Let me show you an example that I could say something like.
10 pixels.
And then the style will be solid and the color will be red.
And now you can clearly see here I have this solid red 10 pixel border.
Let's go ahead and copy this and do the same thing for the up heading one element, except let's make
it blue this time.
OK, so I have the ability to use the shorthand for border or what I could also do is specify border,
left, border, right, cetera.
And let me show you an example of that with the actual margin.
So what I'm going to do here is on the up element.
I'm going to start playing around with margin, but let's just edit the margin bottom.
So.
Margin bottom is the spacing beyond the border.
So recall, there's some sort of spacing here, and there's actually two margins interactive with each
other.
There's the bottom margin of up.
And then there's the top margin of down.
So if I just want to edit the margin bottom here, I could make it a lot larger.
I could say something like 100 pixels, and you can see it essentially pushes out the box, which leaves
less room for the down box to then begin starting.
So this is how you can then space elements on your page.
OK.
So if I wanted to maybe add more margin to the left, I could say.
Margin left.
And at 100 pixels of margin there, you can start to see it's going to end up getting spaced out more
and more.
And you should take into account the fact that I'm kind of zoomed in here so your effects may not look
exactly the same as mine.
And also your effects are going to be different depending on your sizing here.
But this will also let you know what is actually taking effect.
You can see that marginal left in that margin bottom.
No matter what I do, as far as stretching this out, there's always going to be that margin there,
or at least an attempt on margin, depending on how small this thing can go.
OK, so now we understand from the outside we have that margin, then we have the actual border.
And the last thing to discover is the padding.
Remember, the padding is a space between the content that is the texture and the actual border.
So for example, if I wanted just space between down and, let's say, at the top of that border, I
could say padding.
And let's say patting top.
And again, let's add in some padding here, so I can say, let's say, 20 pixels of padding.
Between the text here and the actual border.
So this is going to allow you to begin to play around with the location of the text and the elements
within the borders themselves.
So those are the main factors.
Again, it's going to be starting.
If you're content like up and down text, then you have padding available to you.
And there are shorthand for this.
But if you don't want the shorthand, you can just say padding top left, bottom right.
Then you have the border itself as well.
And then you have the margin.
And in the same way, the border had the shorthand padding and margin also have those shorthand hands.
So if you really want it to, you can come back here.
The margin left and margin bottom and just do something like this.
You could say margin and then say something like 20 pixels, 20 pixels, 100 pixels, 10 pixels or something
like that.
And you can see the margin started to be affected again and kind of zoomed in here.
So you may not see it as pronounced if you really want to see start zooming out.
But you get the idea.
So that's pretty much it for the CIUSSS box model.
It's just a little bit of extra code there in case you ever find yourself trying to figure things on
the page or reconfigure things on the page so that they look a little nicer.
You have those tools available for you in the process of padding, border and margin.
OK.
That's it.
I'll see you at the next lecture.