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.

End of Free Content Preview. Please Sign in or Sign up to buy premium content.


Contact Us
Sign in or email us at [email protected]