The Box Model

An HTML element can take up more space on a page than its content itself. An element is surrounded by 3 other parts:

• The padding around the element
• The border around the padding
• The margin outside the border, to separate from other elements.

For example, here's a paragraph with a padding, border and margin:

The quick brown fox packed my box with five dozen liquor jugs and then jumped over the lazy dogs.

Here's each part marked:

The element itself is in the middle, surrounded by padding in the same color, then a border, and finally a (white) margin on the outside.