Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element.

Here are two boxes, each with some content.

The content is surrounded by an area called padding, similar to how bubble wrap separates an item from the box around it.

Think of the border like the cardboard box your item was shipped in.

Margins separate the boxes from each other.

The bottom element has a larger top margin, pushing it further down the page.