MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

All About The Containing Block

What is the term "containing block" ?

Containing Block is the area where child element putted inside its parent element.

We know that every element in HTML generates box and the layout of that box divides to four areas :

  1. Content Area.
  2. Padding Area.
  3. Border Area.
  4. Margin Area.

Many developers believe that the containing block of elements is always the content area of its parent element. But this is false!

Why determine "Containing Block" of the element is important ?

Because the dimensions and position of the element are determined by it, All percentage value of these properties “width”, “height”, “padding”, “margin” and offset properties of absolutely positioned elements (which have “absolute” or “fixed” value in position property) are computed from the containing block of the element.

How we can determine “Containing Block” ?

The process of determining the Containing Block depends entirely on the position property!

if the position property of the element is :

  1. “static” or relative”, the containing block is formed by the edge of the content box of the nearest ancestor element that is a block container (likes inline-block, block, list-item elements) or which establishes a formatting context (likes table container, flex container, grid container and block container itself).
  2. “absolute”, the containing block is formed by the edge of the padding box of the nearest ancestor element that has value other than the static” value of position property (“fixed”, “absolute”, “relative” or “sticky”).
  3. “fixed”, the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.
  4. In addition, if the position property is fixed” or absolute”, the containing block is formed by the edge of the padding box of the nearest ancestor element that has :
    1. A value other than the none” (initial value) of transform or perspective property.
    2. will-change property that has transform” or perspective” as value.
    3. A value other than the none” (initial value) of filter property or will-change property that has filter” as value. (only works on Firefox)

Note : The containing block in which the root element (HTML) lives is a rectangle called the initial containing block and it has the dimensions of the viewport For continuous media and it is the page area for paged media.

Calculate The Percentage Value of The Containing Block

We have already said that some properties depend on containing block, in calculating its percentage value, these properties are “Box Model Properties” and “Offset Properties”:

  1. “height”, “top” and “bottom” properties compute percentage value from the height of containing block.
  2. “width”, “left”, “right”, “padding” and “margin” properties compute percentage value from the width of containing block.

Important Notes :

  1. If the height of containing block depends on its contents, any element inside the containing block that has “relative” or “static” position, the resolved value of percentage value becomes zero for “height”, “top” and “bottom” properties.
  2. Otherwise, the calculation of the percentage value is normal, as explained previously.

Some Examples

The HTML code for all our examples is :

<body>

<div class='block-container'>

<div class='item'></div>

</div>

</body>
  • position is static” (initial value) or relative”, the containing block is the content area of nearest ancestor element that is a block container or which establishes a formatting context.
.block-container {

    width: 400px;

    height: 300px;

    border: 1px solid #000;

}


.item {

    position: relative; // or "static" (default value)

    width: 50%; // == 200px (relative to the width of the containing block)

    height: 30%; // == 90px (relative to the height of the containing block)

    margin: 5%; // == 20px (relative to the width of the containing block)

    padding: 5%; // == 20px (relative to the width of the containing block)

    background-color: crimson;

}
  • The containing block of item element in this example is the body element, because the block-container element is not block container and doesn’t establish a formatting context.
.block-container {

    display: inline;

}


.item {

    position: relative; // or "static" (default value)

    width: 50%;

    height: 200px; 

    background-color: crimson;

}

  • position is absolute”, the containing block is the padding area of nearest ancestor element that has value other than the static” value of position property.
.block-container {

    width: 400px;

    height: 300px;

    padding: 15px 10px;

    border: 1px solid #000;

    

    /* creates containing block for all absolute descendant elements. */

    position: relative;

}


.item {

    position: absolute;

    width: 50%; // == 210px (due to, the containing block is "padding box")

    height: 30%; // == 99px

    margin: 5%; // == 21px

    padding: 5%; // == 21px

    background-color: crimson;

}
  • position is fixed”, the containing block is the initial containing block that has the dimensions of the viewport for continuous media and it is the page area for paged media.
.block-container {

    width: 400px;

    height: 300px;

    padding: 15px 10px;

    border: 1px solid #000;

}


.item {

    position: fixed;

    width: 50%; // == 50vw minus width of vertical scrollbar 

    height: 30%; // == 30vh minus height of horizontal scrollbar

    margin: 5%; // == 5vw minus width of vertical scrollbar

    padding: 5%; // == 5vw minus width of vertical scrollbar

    background-color: crimson;

}
  • position is absolute” or fixed”, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a value other than the initial value in the transform property or perspective property, or will-change property has transform” or perspective” as value.
.block-container {

    width: 400px;

    height: 300px;

    padding: 15px 10px;

    border: 1px solid #000;

    

    /* creates containing block for all absolute and fixed descendant elements. */

    transform: rotate(0deg);

    // or perspective: 100px; or will-change: transform or perspective;

}


.item {

    position: absolute; // or "fixed" value

    width: 50%; // == 210px (due to, the containing block is "padding box")

    height: 30%; // == 99px

    margin: 5%; // == 21px

    padding: 5%; // == 21px

    background-color: crimson;

}
  • position is relative” or static” and the height of containing block depends on its contents, the resolved value of percentage value becomes zero for height”, top” and bottom” properties.
.block-container {

    width: 400px;

    height: auto;

    border: 1px solid #000;

}


.item {

    position: relative; // or "static" (default value)

    width: 50%; // == 200px (relative to the width of the containing block)

    height: 30%; // == 0 (zero) 

    margin: 5%; // == 20px (relative to the width of the containing block)

    padding: 5%; // == 20px (relative to the width of the containing block)

    background-color: crimson;

}


Summary

  • Every element has containing block that based on it.
  • The containing block of the element is determined by position property of the element.
  • The containing block can be the padding box or content box of one of ancestral elements, or can be the initial containing block that has the dimensions of the viewport For continuous media and it is the page area for paged media.
  • The dimensions and position of the element are determined by its containing block.

Document Tags and Contributors

 Contributors to this page: mustafasalah
 Last updated by: mustafasalah,