In This Article we are going to learn about CSS Box Model , which is a really important concept to understand to style element .

what is CSS Box Model

CSS Box model is a way to describe the layout of an element and its content. Its a box that wraps every element and it has properties like padding , border and margin.

To make it easy , i can say every html element (for ex . heading , paragraph , span , div etc) has its own space .This space has its own little border and This space is in square form around every element. We have element with content then we can give this element padding if we want then we can give it border and then comes border.

you can understand it by below image.

More About padding property

This forms a transparent area around the content that extends from the outer edge of the content box to the inner edge of the border.The space around the content but within the borders of the element.

we can give padding from every side or we can also give padding from one specific side.

padding : 2rem  //it will give padding from each side
padding-top: 2rem  // it will give padding from top side
padding-right: 2rem  // it will give padding from rightside
padding-left: 2rem  // it will give padding from left side
padding-bottom: 2rem  // it will give padding from bottom side

// Shorthands for padding
padding: 10px 20px  // padding : top-bottom right-left
padding: 10px 20px 30px 40px;  // padding : top left bottom right

More About Border property

The border mark itself. The border property lets us add and style a line around the content padding area.

This line's thickness, color, and style can be defined by the border-width, border-color, and border-style properties, or you can use the shorthand border property to define all three.

Border-style values include solid, dotted, dashed, double, groove, ridge, and none.

More About Margin

Margin is works same like padding but it works outside of border. Its the area outside the border mark and clears space around elment border. we can understatnd its properties from below code

margin: 2rem  //it will give marginfrom each side
margin-top: 2rem  // it will give margin from top side
margin-right: 2rem  // it will give margin from rightside
margin-left: 2rem  // it will give margin from left side
margin-bottom: 2rem  // it will give margin from bottom side

// Shorthands for padding
margin: 10px 20px  // margin: top-bottom right-left
margin: 10px 20px 30px 40px;  // margin: top left bottom right

These are the basics of box model. That it for today 🙏.