CSS : The Box Model

The Box Model

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.

The Box Model

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


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


Also, Read –

Leave a Reply

Your email address will not be published. Required fields are marked *