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
The Box Model

Introduction to the Box Model

Browsers load HTML elements with default position values. This often leads to an unexpected and unwanted user experience, while limiting the views you can create. In this lesson you will learn about the box model, an important concept to understand how elements are positioned and displayed on a website.

If you have used HTML and CSS, you have unknowingly seen aspects of the box model. For example, if you have set the background color of an element, you may have noticed that the color was applied not only to the area directly behind the element, but also to the area to the right of the element. Also, if you have aligned text, you know it is aligned relative to something. What is that something?

All elements on a web page are interpreted by the browser as "living" inside of a box. This is what is meant by the box model.

For example, when you change the background color of an element, you change the background color of its entire box.

In this lesson, you'll learn about the following aspects of the box model:

  1. The dimensions of an element's box.
  2. The borders of an element's box.
  3. The paddings of an element's box.
  4. The margins of an element's box.

Let's begin!

Instructions

Take some time to edit the code to the right. See if you can figure out how these following properties impact an element's display:

  1. height
  2. width
  3. padding
  4. border
  5. margin
  6. overflow
Report a Bug
If you see a bug or any other issue with this page, please report it here.