Slide 6 of 36

CSS Box Model

Space between block level elements
Visual border surrounding the element
Space between the border and the element content
Dimensions of the element content

Image illustrating the relationship between content, padding, borders, and margins

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.