What Is CSS Box Model?

The Box model in CSS consist of the content area, which is where any text, images, or other HTML elements are displayed., and the areas that surround it like Padding, Border and margin.

as we see in the above image that every CSS box consist of the content , padding, border and margin.

Now lets understand each part of the Box model:

Content area

the content area is the area in which a text , image or another HTML elements are displayed. the content is surrounded by the padding.

Padding

the Padding area is the area which surround the content. it's job is to create a space around the content. it is surrounded by the border.

Border

the border is a line that surrounds the content and the padding.

Margin

the Margin area is the outer area that surround the border, padding and content. it is used to create a space around the the border.

To understand how each of them works we will set values for each one of them and see how they behave:

lets use an h1 tag with the text hello world and assign it those values below:

padding:20px; : this will create space around the text.

border:4px solid black; : this will create a border around the padding and the text.

margin-top:40px; : this will create a space from the top of the border.

margin-left:60px; : this will create a space from the top of the border.

TIP : google has an amazing tool called developer tool (inspect), this tool allows you to see the code of any webpage, it also shows you the CSS box model for any element.

All you have to do is right click the mouse and choose the inspector option: