Each HTML element has a box that contains it. The size of this box depends on the default settings of the User Agent, the browser, and whatever properties are assigned to it with the CSS. The boxes are called the containing block of the element. The layout of all the containing blocks on a web page is one of the most basic concepts behind CSS.

With web pages seen on browsers and mobile devices, the initial containing block is the page area.

The containing block is defined by the following:

  1. The containing block is a rectangle inside of which is the root element.
  2. The containing block is formed by the content edge of the nearest ancestor box.
  3. If the element has the property of position: fixed, the location of the containing block is relative to the page area of a web page.
  4. If the element has the property of position: absolute, the location of the containing block is relative to the nearest ancestor. This position lies inside the padding edge of the nearest ancestor.

Containing blocks and the width property

The width property defines the content width of the box for an element. This width lies inside of the padding and/or the border for the element. The value given to the width property can be in pixels, em or a percentage. The percentage will be a percentage of the width of the parent element. The containing block will be the width + padding + border.

Example:

img.sidephoto {width: 200px;}