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 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.