CSS box model

CSS has a rule called box model rule while displaying and positioning HTML elements.
The first attribute is called padding. Padding is defined as the difference in units of an HTML element's content and the border surrounding it. For example, if the padding for an element is 10 px then the difference between the width of the text of that HTML element and the border surrounding is 10 px.
The width of an element is inclusive of the padding and exclusive of the border surrounding.
After the width is taken by the element the border is printed around the element, if it is specified in the CSS stylesheet.
For examle, if the width of an HTML element is 30 px and the padding is 10 pf and border with 2 pf, the element content will have the dimension of 10px by 10px
the space taken wii bem30 by 30 and surrounding 2 pixel border surrounding the 30px boundary and the total width will be 32 by 32px.
After the border whatever the margin is specified in the margin CSS margin property will add the total space taken by the element.
You can specify different padding for different direction . We can specify diffferent margin for different direction.

There are four types of directions in the box model as follows:

1. Top
2. Right
3. Bottom
4. Left

All the above directions are specified in the order given above from top to left.
For example, if you want the margin of an element as 10 px to the right, 10px to the left, 20 0x tom then top and 20 px to the bottom.

The code will be as follows:
{margin:20px 10px 20px 10px}