Slide 6: CSS Box Model

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

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.