Here is some content that we can use to explore the box model. The box model surrounds the content with padding, then border and finally a margin.

Padding provides space between the content and the border. The "padded" area will have the same background color as the content. We can control the amount of padding using pixels, ems, or a percentage. We can have the same amount on each side or set each separately.

A border can have its own color, style and width. We can set these separately or using a single composite style rule.

The margin is the space between one element and the next. We control the margin sizes in the same way that we control padding.