- How Are Elements Displayed?
- What Is the Box Model?
- Working with the Box Model
- Developer Tools
- Summary
What Is the Box Model?
According to the box model concept, every element on a page is a rectangular box and may have width, height, padding, borders, and margins (see Figure 4.2).
![Figure 4.2](/content/images/chap4_9780321940520/elementLinks/04fig02.jpg)
Figure 4.2 When we look at each element individually, we can see how they are all rectangular, regardless of their presented shapes
That’s worth repeating: Every element on a page is a rectangular box.
Every element on every page conforms to the box model, so it’s incredibly important. Let’s take a look at it, along with a few new CSS properties, to better understand what we are working with.