Understanding the box model

The first step to understanding what we are doing with styles is to understand the space that is occupied by every element. Each element lives inside of its own box. This is true of both in-line and block displayed elements. Lets start out by looking at this Box Model Example.

Using a live CSS editor like our Test Styles bookmarklet, let's play around with some divs and the box model.