Welcome to this section of box model.
So what is box model in CSIS?
Well, the box model is one of the core concepts in web design and web development.
It encompasses everything that makes up a design from headers, footers and main content areas to margins,
patterns and borders.
So everything on a web page is a box.
Everything on a web page is a box.
Take note about this.
So looking at this one, anything on this page is being regarded as a box.
So let me remove the background color and this one for now, and let's maintain the red background over
the red color over there.
So anything you see on the page, whether it is H one images, anything is being regarded as a box.
That's the key point.
You need to take note here.
And each box has its own properties that can be styled with CSS.
See where we are heading towards.
Now, every element on a web page is being described as a box, and this box has properties.
The CSS box model is a model for describing the boxes that make up a web page.
One property is what we call width.
The width of the element here is the width from where from left to right is the width of my element.
How?
The width of the particular element.
Taking this box, for example, this box has a width.
Right.
So let's look at this box.
See that?
This box, you can see that the width of this box is from here to here.
The next one is what we call the height.
So from here to here is a weight.
The height of my box is this one.
The height of my box.
So it is what you call height.
And apart from height, we also have what is called pattern wear for the pattern.
Difficult to explain to you within this box.
And then the last one would call a margin.
Assuming that we have many boxes, the margin is a space between two elements to the net less one is
a margin that we want.
We take this one the height, the margin and party into consideration.
So by understanding these properties and how they work together, you can create complex design with
ease.
Each box has its own properties that can be style, so that's what we are going to talk about.
But before we end up this video, let me show you that every element is a box that has all these properties,
meaning that any element on the page is a box.
Meaning the half of this property is called margin padding and then height and width.
So let me show you with using the data.
So right click on any page and then click on style.
If we see there are some around we have down here and this is what you call the box model.
So any element that we click on, so let me select this one and click on the H one.
We see that when I click on I have this beautiful box model here, meaning that this particular this
particular element is made up with this box.
We see that this box has a margin as we talk about has a border, has padding and has a width and in
height we see that to every element has this box model or both properties.
So let's video.
Let's start with the width and height properties of any element on the page.