CSS Box Model
- Margin: Space between block level elements
- Border: Visual border surrounding the element
- Padding: Space between the border and the element content
- Element: Dimensions of the element content
Description of illustration of box areas
The diagram illustrates the four areas of the generic CSS box: content, padding, border, and margin.
There are four nested boxes: the content area is the innermost, then padding, border, and margin areas. Each area has a different border style to distinguish its edge: the content edge is thin and solid; padding is thin and dashed; border is thick and solid; margin is thick and dashed.
Below the boxes, a legend lists the border styles used for the four edges.