What is the box model?

Every block-level HTML element you put on a webpage is a box, even if it doesn't ordinarily look like it. For example, if you add a <p> element to your webpage and load it, it initially looks like it's just loose text. If you add some CSS colors, though, you can see the square box shape.

The box model defines the different parts of that shape, which are broken up into four pieces, or sub-boxes. Those are below -

Parts of the box model:

1. Content :

The content of the box, where text and other visible content appear. For example, in the<p> element that is the area where text would be displayed. In the below image, the entire area is made visible with the background color.

2. Padding:

A box surrounds the inner content element. In the below image, the extra space around the content which shares the background color is the padding area.

3. Border :

A box surrounds the padding element. In the below image, the back color around the padding is the border.

4. Margin :

It's a functionally invisible box that surrounds the border element. In the below image margin act as a white space to separate space between and around two paragraphs.

Try it by yourself:

Now try out by yourself all of these elements discussed above.

Try adding all of this declaration one by one--

The structure of the box model: