Boundaries and Space

The Box Model

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.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.