CSS Box Model

The CSS Box Model

 

Your understanding of the box model concept, and how it relates to the way in which an element’s final dimensions are determined, will be essential to your understanding of how an element is positioned on a web page. The box model applies to block-level elements. A companion concept, the inline layout model, defines how inline elements are positioned, and is covered in Inline Formatting.

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 heightproperties. If no declarations are applied, the default value for the width and heightproperties is auto.

For static (non-positioned) elements, and relatively positioned elements where thewidth 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 positionis set to fixed), a width of auto will make the generated box shrink to the intrinsic dimensions of its contents.

Note:Floated Elements and Width

Previously, in CSS2, floated elements without a declared width value would not shrink to wrap their content; instead, they’d expand to the full width of their parent element. This behavior was changed in CSS2.1 to allow the shrink-wrapping to take place. However, in Internet Explorer 6 and earlier versions, a floated element with no declared width value will shrink to wrap its content as per the specifications unless a child element has a layout, in which case the floated parent will expand to fill the available content width of the parent.¹

It should also be noted that when a float (without a declared width) contains a right-floated child element, it will also expand to fill the parent’s available content width in IE browsers up to and including version 7 (Firefox up to and including version 2.0 also exhibits this bug but, the problem appears to have been fixed as of Firefox 3.0 Alpha 6).

Therefore, it’s always safer to specify an explicit value for the width of a floated element where possible, and thereby to avoid the buggy behavior described above. However, as long as you’re aware of the problems mentioned above, you’ll likely find that widthless floats can be useful in certain situations, such as fluid-width horizontal menus.

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;
  height: 200px;
  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.

Figure 1. The CSS box model in action

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.

Note:Watch Out for Collapsing Margins

Although margins are included in the above calculations for the total space required to place the element, note that vertically adjacent margins on static (non-positioned) elements would collapse into the bigger margin of the elements that are adjacent above and below. This means that the actual space required to place an element would not necessarily extend from the margin edges of elements existing on the page: only the biggest margin will apply, and the smaller margins will appear to overlap the bigger margins. See Collapsing Margins for the full details of this quite complicated subject.

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 widthproperty 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.