The Box Model
Premium Content - Free Preview
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.