The CSS box model is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to create the design and layout of web pages. According to the CSS box model, the web browser supplies each element as a square prism.

Properties of the Box Model

Content

The content area consists of content like image, text, or other forms of media content. The height and width properties help to modify the box dimensions.

Padding

The padding area is the space around the content area and within the border-box. It can be applied to all sides of the box or to the specific, selected side(s) - top, right, bottom, and/or left.

Border

The border area surrounds the padding and the content and can be applied to all the sides of the box or to selected side(s) - top, right, bottom, and/or left.

Margin

The margin area consists of the space between the border and the margin. The margin does not possess its own background colour and is completely transparent. It shows the background colour of the element, like the body element.

HAPPY LEARNING :)