the css box model...

Calculating Box Dimensions

In CSS2.1, block-level elements can only be rectangular. We calculate the overall dimensions of a block-level element by taking into account the height and width of the content area, as well as any margins, padding, and borders that are applied to the element.

We can define the content width of an element by declaring its width and height properties. If no declarations are applied, the default value for the width and height properties is auto .

For static (non-positioned) elements, and relatively positioned elements where the width property has the value auto , the computed width will be the width of the containing block minus any horizontal margins, borders, padding, and scrollbars. That is, it will be whatever’s left over when horizontal margins, borders, padding, and scrollbars (if any) have been deducted from the width of the containing block.

The containing block is the reference rectangle whose position and dimensions are used for relative calculations of descendant elements’ positions and dimensions. Although elements are positioned with respect to their containing block, they’re not confined by it, and they may overflow. In most cases, generated boxes act as containing blocks for descendant boxes. The full details of containing blocks are covered in Containing Block .

For floated or absolutely positioned elements (including elements for which position is set to fixed ), a width of auto will make the generated box shrink to the intrinsic dimensions of its contents.

No matter how the content area is positioned, its height value will be equal to the content height if no values have been declared for height , or for min-height and max-height .

Therefore, to ascertain the total space required to place an element on the page, add the content area’s dimensions to any padding, borders, and margins that have been declared. Of course, an element may have no padding, border, or margins, in which case its dimensions will be dictated solely by its content.

If an element contains only floated or absolutely positioned elements, it will have no content at all, and its height will be zero. We’ll discuss this more in Floating and Clearing .

Implementing the Box Model

The box model is best demonstrated with a short example. The calculation we’ll use to ascertain the total space required to accommodate an element on the page (ignoring margin collapse for the time being—see below for more on this) will be as follows:

Total width = left margin + left border + left padding + width +

                   right padding + right border + right margin



Total height = top margin + top border + top padding + height +

                   bottom padding + bottom border + bottom margin

Here’s our example CSS—a rule set that contains declarations for all the box properties of an element that has the class "box" :

.box {

  width: 300px;

  

  padding: 10px;

  border: 1px solid #000;

  margin: 15px;

}

The total size of the element above will be calculated as follows:

Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px

Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

The above calculation is depicted in Figure 1 , which is taken from the element layout display from Firebug, the JavaScript and CSS development add-on for Firefox.

In Figure 1 , we can clearly see the content area in the center, the padding around the content area, the border area, and the margin area. The outer edge of the content area is called the content edge or inner edge ; the outer edge of the padding area is called the padding edge ; the outer edge of the border area is called the border edge ; and the outer edge of the margin area is called—you guessed it—the margin edge or outer edge .

You can see from this short example that, for this element to fit on the page, we’ll need a space that’s at least 352px wide and 252px high. If the space available is any smaller than this, the element will be misplaced, or will overflow its containing block. Note that Internet Explorer 6 and earlier versions will most likely stretch the containing block to accommodate this extra height, and could severely disrupt the layout. Other browsers will let the element overflow its boundaries, but will ignore the content.

Practical Considerations of the Box Model

An important point to note is that an element that has its width set to 100% (that is, 100% of the content width of its parent element) shouldn’t have any margins, padding, or borders applied, as this would make it far too big for the space that it sits in. This is often overlooked by authors and can severely disrupt a page’s layout, as content will either overflow or push elements wider than they should be.

The solution, in most cases, is to avoid adding a value for the property width (other than auto ), and to apply the margins, padding, and borders only. The width property of a static element will default to auto , and even with padding, borders, and margins added, it will still assume the full available content width.

Of course, this approach may not be feasible in some instances, such as cases where the element is not a static element, and requires the definition of a specific width value (as in the case of a floated element that doesn’t automatically expand to fill its parent). In these cases, you have two options.

If the available space is of a fixed width, you can simply add the value of each component together to ensure that it matches the available width. For example, if the available space is 500px wide, and you require an element to have 20px padding, simply set the width to 460px and the padding to 20px for that element (20 + 460 + 20 = 500 ). This solution assumes that the length values specified for the element’s box properties use the same unit of measurement, since you won’t be able to add together a mixture of units (200px + 10% , for example, makes no sense in this context).

When the available content space has an unknown width—as in the case of a fluid layout—this method can’t be used, as percentages and pixels can’t be added together. In this case, the solution is to declare a width of 100% for the element concerned, and to apply the padding, border, and margin values to a nested element instead. That nested element has no width declaration, and can display the required padding, borders, and margins without encroaching on the parent element.

Now that you have a clear understanding of the CSS box model, you should also make yourself familiar with what’s commonly called the Internet Explorer 5 box model .