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!

Code Editor
Web Browser
Learn

Great job! In this lesson, you learned about padding, margins, and the display properties of elements.

Let's review what you've learned so far:

  1. Padding is the spacing between a box's content and the borders of the box.
  2. Padding can be set equally on all sides of the content, or can be set specifically for certain sides of the content only.
  3. Margin is the spacing directly outside of a box's borders.
  4. Margins can be set equally on all sides of a box, or can be set specifically for certain sides of the box only.
  5. The display changes the default behavior of HTML elements.
  6. The visibility property hides an element, but does not remove the amount of space the element takes up on the page. If you want to hide that element and remove the empty space, use the display property instead.

This lesson completes our overview of the standard box model. Understanding the box model is important if you want to understand web page layouts.

Unfortunately, the standard box model has a minor limitation: unreliable box dimensions. In the next lesson, you'll learn more about how to solve this problem using a quick, but important technique.

Instructions

Remove the first bit of code that you added at the beginning of the lesson (only the border declaration shown below, leave the margin and padding resets at 0), then take some time to experiment with your new knowledge of padding, margins, and display in style.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.