An important part of styling a webpage with CSS is organizing boundaries and space.

Every page element has boundary and space properties that can be controlled using CSS. The CSS box model illustrates each of these properties.


Observe the CSS box model diagram to the right:

  1. content: Includes text, images, or other media contained within an HTML element.

  2. padding: The space between the content and the border. You can think of this like inner space.

  3. border: The outline of an HTML page element. You can think of it like a picture frame that contains the element.

  4. margin: The space between the HTML page element and the next nearest element(s).

After you have familiarized yourself with the Box Model, click Next to continue.

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?