What is CSS box model?

Each element in a document is represented by a rectangular box. Its has four parts:-

1. Content Area
2. Padding Area
3. Border Area
4. Margin Area

Content Area

Represented by content edge(blue colored area). It is the area that is actually taken by the content for example any text or image or any video. Its has its width and height.

Padding Area

Represented by padding edge(green colored area). It is actually the space between content's area and border. Using shorthand padding property of CSS or padding-top, padding-right, padding-bottom, padding-left of CSS its width and height can be set.

Border Area

Represented by border edge(yellow colored area). After Padding area border area is present is holds border of the element, if any. border-width property of CSS can determine thickness of border

Margin Area

Represented by margin edge(dark orange colored area). The outer most area of any element is margin area, as you may know margin can be used to keep distance between two different elements. Its sizing can be done using margin property for shorthand or margin-top, margin-right, margin-bottom, margin-left CSS properties