Hello and welcome back to another lesson which is about the CSS Box model.
Well in its dismal each element is essentially a rectangular box.
This means that the paragraph element the heading element the development and even the body element
are all invisible boxes that are invisible because by default they don’t have any background color or
borders so we don’t feel their presence therefore when we add a border property that I talk about in
detail later.
For all the elements
we actually start to realize in existence as we see on the website this heading paragraph div etc. are
all rectangular boxes and by controlling the properties of these rectangular boxes we can organize the
elements on the beach like the dimension adjust their positioning etc..
For instance, if I had diverted property to paragraph elements
and set it to 50 percent then the word now reduces to 50 percent and by default, it’s hundred percent
and takes up the whole page.
Likewise, we can adjust other properties that I’ll talk about soon but what I would like to explain first
is the structure of the box which is also known as the box model.
And by knowing this box model you can control the page content much more effectively the first walkthrough
the model than I show you on the website.
So here’s the box model inside the box.
We have the content area for a paragraph or heading element.
This could be the text content or for any other element like the div element.
This could be different elements that are inside.
So content is whatever we have inside the element.
After that the box has padding border and margin and each one of them occupies some space.
The padding is the space between the content and the boundary of the box and you can increase or decrease
the padding size and we can have padding on each side of the box.
And this inner space on the right is called padding-right.
Likewise, this inner space on the left is padding left in the top and the bottom ones are padding-top
and padding-bottom respectively.
Then what follows is the border so the border is the boundary of the box.
The right boundary is called the Border right-left.
One is called border-left and the same way the top one and the bottom ones are border-top and border
bottom.
The default border property is set to None which means no border.
But just like I showed we can add the border and specify the thickness but when we don’t add etc None
by default and therefore we don’t see it and finally after the border comes margin just like the padding
is the inner space between the border and the content margin is the outer space between the border and
the other elements and we have right margin as margin right-left when s margin-left and likewise margin
top and margin-bottom.
So we use margins to control the outer space well this was a concept.
Let’s now get back into the sea a says document let us stick this heading as an example.
We already have set some water for all the elements on the beach inside the universal selector.
So the changes that we are going to make are gonna be visible cause we can see the box now.
This will help you understand better so let’s start with the padding which is the inner space and set
it to let’s say 50 pixels now save it and then before I refresh the beach I would like you to notice
the space between the boulder and the content.
Now after I refresh the page it’s going to increase to 50 pixels causing the box to expand let’s now
go back to the document and at the margin property and set it to let’s say 50 pixels.
Now I say again.
And then if I refresh now then space outside will increase on all sides.
But I would like you to notice the space between this heading and this paragraph element so I refresh.
And now the space around the element outside has increased.
And now the space between this heading and the paragraph element has increased as well.
I know you must be having some more questions with regards to the margin padding and Bodo properties
but you will have a clearer understanding of the next lesson.
But I’ll talk more in detail about them because the objective of this lesson is to introduce and explain
the box model as we can see here on the browser that every element is a box with content padding border
and margin.
So this was about the box model and CSS as and knowing this is extremely crucial to understand and control
the behavior of the elements on the beach.
So in the next lesson, I’m gonna talk further about these padding border and margin properties and I’ll
also, tell you about one very useful tool on the web browsers so keep learning and see when the next
lesson.
Also, Read –
