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
andheight
: 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.