What is CSS Box Model

In the web all elements have a rectangular box area, every box has four properties: content area, padding size, border size, and margin size. When all four properties are merged then it's converted in the CSS box model. In this example:

Content area: where we are placing web element as text, image, video etc.

Padding: Space around the content area.

Border: Size around the padding and content area.

Margin: Space around the border outside the area.

CSS Box Model = Content Area + Padding + Border + Margin

Example:

400px = width:300px + Padding (padding-left:20px + padding-right:20px) + Border(border-left: 5px + border-right:5px) + Margin(margin-left: 25px + margin-right: 25px)