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

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

Or sign up using:

Already have an account?