CSS Box model

Web/CSS 2008. 6. 30. 15:40

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

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

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 A diagram displaying the width of a box and how it is
          calculated in CSS. The interior dimensions are added to the padding,
          border and margin widths.

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.

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.

Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요

  1. BlogIcon 셈틀쟁이 2008.06.30 19:32 신고  댓글주소  수정/삭제  댓글쓰기

    아오 몽땅 영어야....ㅋ