There is one more kind of box that we need to examine in detail, and in this case enough detail that it merits its own section: the containing block. Every element’s box is laid out with respect to its containing block; in a very real way, the containing block is the “layout context” for a box. CSS defines a series of rules for determining a box’s containing block. We’ll cover only those rules that pertain to the concepts covered in this book in order to keep our focus.
For an element in the normal, Western-style flow of text, the containing block forms from the content edge of the nearest ancestor that generated a list item or block box, which includes all table-related boxes (e.g., those generated by table cells). Consider the following markup:
<body> <div> <p>This is a paragraph.</p> </div> </body>
In this very simple markup, the containing block for the
p element’s block box is the
div element’s block box, as that is the closest ancestor element box that is a block or a list item (in this case, it’s a block box). Similarly, the
div’s containing block is the
body’s box. Thus, the layout of the
p is dependent on the layout of the
div, which is in turn dependent on the layout of the body element.
And above that, the layout of the
body element is dependent on the layout of the
html element, whose box creates what is called the initial containing block. It’s a little bit unique in that the viewport the browser window in screen media, or the printable area of the page in print media determines its dimensions, not the size of the content of the root element. It’s a subtle distinction, and usually not a very important one, but it does exist.