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)