Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Learn

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.

Instructions

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.

Report a Bug
If you see a bug or any other issue with this page, please report it here.