The box model comprises the set of properties that define parts of an element that take up space on a web page. The model includes the content area’s size (width and height) and the element’s padding, border, and margin. The properties include:

  1. width and height: The width and height of the content area.
  2. padding: The amount of space between the content area and the border.
  3. border: The thickness and style of the border surrounding the content area and padding.
  4. margin: The amount of space between the border and the outside edge of the element.


Take a look at the image on the right—a visual representation of the box model.

You can open the box model image in a new tab to reference it as you move through the lesson.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Already have an account?