Containing Block

CSS rendering comprises the tasks of laying out and rendering numerous boxes. Element boxes are positioned within a formatting context, which, by default, is provided by the box generated by a parent element.

When we specify the positions or dimensions of element boxes, we’re doing so relative to what’s known as the containing block, which is a very important concept in CSS layout.

The containing block for the root element is called the initial containing block, and has the same dimensions as the viewport for continuous media (such as the screen) and the page area for paged media (such as print).

The containing block for any other element box is determined by the value of the position property for that element.

If the value of the position property is static (the default) or relative, the containing block is formed by the edge of the content box of the nearest ancestor element whose display property value is one of:

  • block
  • inline-block
  • list-item
  • run-in (only in a block formatting context; see Formatting Concepts)
  • table
  • table-cell

If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative. The containing block is formed by the padding edge of that ancestor.

If the value of the position property is fixed, the containing block is the viewport (for continuous media) or the page box (for paged media).

Note that although positions and dimensions are given with respect to the containing block, a descendant box isn’t constrained by its containing block; it may overflow.

Note: Content Edge and Padding Edge

The content edge of a box is defined by the outer limits of the content area—it doesn’t include any padding that may exist outside the content.

The padding edge of a box is defined by the outer limits of the padding area—it doesn’t include any borders that may exist outside the padding. If a box has no padding, the padding edge is equivalent to the content edge.

Refer to The CSS Box Model for a graphic illustration of these concepts.

User-contributed notes

ID:
#2
Contributed:
by pmmueller
Date:
Tue, 29 Jan 2008 13:44:51 GMT

> If the value of the position property is absolute, the containing block is the nearest positioned ancestor

I am aware that this is implicitely stated in the paragraph about the "intial containing block", but should it perhaps be explicitely mentioned that if no such positioned ancestor exists, then the containing block for an absolutely positioned element is the root element "html" and NOT "body"?

Related Products