What is the CSS box model for block elements on a Web page?

The CSS box model specifies that each block element, like <p> or <div>, on a Web page should be displayed as a set of 4 nested boxes as shown in the diagram below:
.

1. The "margin" box - The most outer box is called "margin", which has a transparent color. You can see through the "margin" box. The thickness of the "margin" box can be controlled by the "margin" properties.

2. The "border" box - The first inner box is called "border". The thickness and color of the "border" box can be controlled by the "border" properties.

3. The "padding" box - The second inner box is call "padding", which shares the background color of the element. The thickness of the "padding" box can be controlled by the "padding" properties.

4. The "content" box - The most inner box is called "content", which is used to display the content of the element. The size of the "content" box is controlled by the "width" and "height" properties. The background color of the "content" box is controlled by the "background" properties. the "padding" box can be controlled by the "padding" properties.