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!

Code Editor
Web Browser
Understanding the Box Model

Review: Box Model

Great work! In this lesson, you learned about the boxes that contain all HTML elements and how to manipulate their dimensions.

Let's review what you learned:

  1. All HTML elements are contained within a box.
  2. Boxes have two dimensions: a width and a height. These dimensions can be modified with the width and height properties.
  3. Width and height dimensions can be set using one of three units of measurement: pixels, ems, or percentages.
  4. A minimum and maximum width or height can be set for a box. This helps ensure that content remains legible when a user shrinks or expands their browser window.
  5. If an element's box becomes too small, the content may overflow. The overflowed content can be controlled with the overflow property.

You probably noticed that we started this lesson by selecting all elements on the page with the universal selector, *. We also used a CSS property that we haven't yet covered: border. In the next lesson, you'll learn about box borders and how to manipulate them using CSS.


Remove the first bit of code that you added at the beginning of the lesson (shown below), then take some time to experiment with your new knowledge of the box model in index.html.

* { border: 1px solid rgba(0, 0, 0, 0.3); }

When you're done, proceed to the next unit.

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