CSS Box Model

CSS Box Model is nothing but what are the different features provided by CSS around all the content or element. it sets the look for it. it consist of Four things Margin, Border, Padding around all four sides of Content.

Let's talk about all of this things one by one.

1.Margin

let's take a 2 container/box as our content, and distance which separate those two container is said to be the margin. margin is provided on all sides of the content.

• Margin-Top
• Margin-Right
• Margin-Bottom
• Margin-Left

As it's name suggest what actually it is , we can set them individually as well as together also.

Syntax:

element{
margin: 20px 30px 40px 10px; 
/*or*/
margin-top:20px;
margin-right:30px;
margin-bottom:40px;
margin-top:10px;
}

2.Border

We can set border for our content an all four sides. just like margin. while setting up border we have to mention 3 parameter

• border-width
• border-type
• border-color

Syntax:

element{
border: 5px solid red;
/* or */
border-width:5px;
border-type:solid;
border-color:red;
}

3.Padding

Just after the border the term comes in is padding. Padding is nothing but we can say internal margin. it is distance or space between border and the content. similar to margin it is also provided on all four sides.

• Padding-Top
• Padding-Right
• Padding-Bottom
• Padding-Left

Syntax:

element{
padding: 20px 30px 40px 10px; 
/*or*/
padding-top:20px;
padding-right:30px;
padding-bottom:40px;
padding-top:10px;
}

4.Content

content is nothing but what are the data we write in between the elements.