The size and position of an element are often impacted by its containing block. Most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case. In this article, we examine the factors that determine an element's containing block.
When a user agent (such as your browser) lays out a document, it generates a box for every element. Each box is divided into four areas:
- Content area
- Padding area
- Border area
- Margin area
Many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. Let's investigate the factors that determine what an element's containing block is.