General

containing block definition

 

A containing block is a rectangular shape in which lies an element. The size and placement of the boxes of an element are frequently defined in relation to a containing block.   The containing block varies in regards to what it includes.  For example: 1) If  a containing block contains the root element it is called an initial containing block. 2) If the element’s position is either static or relative, the containing block is created by the edge of the content closest to the block container ancestor block. 3) If the element’s position is fixed, the viewport creates the containing block in regards to continuous media or, in the case of paged media, it is established by the page area. 4) If the element is positioned absolutely (position: absolute) the containing block is created by the closest ancestor with a position of fixed, relative or absolute.  A) The containing block is the bounding box that surrounds the padding boxes of the last and first inline boxes created for that particular element when the ancestor is an inline element. B) If this is not the case, then the containing block is created by the padding edge of the ancestor. And if there is no ancestor, then the containing block is the initial containing block.  Also, an absolutely positioned element is placed relative to the block that contains it without regard to page breaks.  And the element may be broken amid many pages.