The Box Model In CSS

CSS treats an HTML document as a Hierarchical tree of elements, where each element can have zero or more child elements arranged in an ordered way. the topmost element of this tree is called as root element or the parent element. These elements display their content at a specific position which is defined by using CSS properties. CSS converts the data of HTML elements in the form rectangular boxes by using a layout model called the box model, to set the design and layout of HTML documents.
This means that the box model determines how HTML elements are displayed as boxes. The box model allows placing a border around the elements and also provides space between elements.

Content Area: Displays the content of a document such as text and images. This is bounded by a rectangle which is called as the content edge.

Padding Area: Specifies the area around the content area. This is bounded by the padding edge. Outside the padding is the border area and the outside boundary of that area is the border edge.

Border Area: Specifies the area around the padding area. This is bounded by the border edge.

Margin Area: Specifies the area around the border area. This is bounded by the margin edge.
A Box model includes the following types of boxes.

block-level box: Represents a box to show a paragraph.

Line box: Represents a box to show a line of text.

inline-level box: Represents a box to show the word of a line.