Box Model

The Box Model is a CSS layout mechanism that the web browser uses to render content organized by box-shaped elements. Each element is made of four specific areas:

• width and height: The width and height of the content area.
• padding: The amount of space between the content area and the border.
• border: The thickness and style of the border surrounding the content area and padding.
• margin: The amount of space between the border and the outside edge of the element.

Content Area

This area contains the actual content of an element, including text and images. It also sometimes has a background-color or background-image.

Padding Area

This area is located between the content and border areas. It can be changed on the top, right, bottom and left sides.

Border Area

This area is located between the margin and padding areas. Their thickness and style can be changed.

Margin Area

This is the outermost area in the Box Model. It borders with the margin areas of neighboring elements. It can be changed on the top, right, bottom and left sides.