The box model

So far, all the elements on our pages look almost identical because we have not learned how to adjust the size of each element. We are now ready to progress to more realistic page designs by introducing a foundational layout concept called the box model.

Try to picture each HTML element as a box made up of different layers. The different layers are the element’s content box, padding, border, and margin. We will explore each of these layers one by one. The following figure illustrates how all aspects of the box model relate to one another. You can see that the margin is the outermost part, followed by the element’s border and padding between the border and content area:

Figure 2.19: The box model

We will now look at each of the box model elements, in turn, starting with the innermost content box.

The content box

The content box is the part of the element where the actual content lives. This is typically text but could...