# CSS Box Model

To understand layout and positioning in CSS, it helps to understand the box model. When displaying an HTML element, the content of that element is considered to be a rectangular box which has a content area surrounded by padding, a border, and margins.

The diagram below shows these various box model parts:

Margin - Area around the border. The margin is always transparent
Border - The border is an area that lies around the padding and content. The border can be styled in various widths and colors
Padding - The padding is the space around the content area. This area is affected by the background color of the content
Content - Contains the content of the box (where text and images are placed)