Description

This property can be used to specify the CSS box model that’s used to calculate the widths and heights of elements. -moz-box-sizing is similar to the CSS3 proposal called box-sizing but, again, exhibits differences: the CSS3 proposal doesn’t include the value padding-box.

In the following example, we specify that the border-box box model is to be used to calculate the dimensions of matching elements, where the padding and borders will be included within the dimensions, rather than added to them:

.example {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 200px;
  height: 120px;
  padding: 30px;
  border: 5px solid #000;
  background: #ffffcc;
  text-align: center;
}

The results of the CSS above can be seen in Figure 1.

Figure 1. Mozilla border-box dimensions

As you can see, the padding and borders have not added to the element’s overall width or height. Instead, the content area has been reduced by the size of the padding. The result is the same behavior that Internet Explorer versions 6 and 7 exhibit while in quirks mode, and that Internet Explorer for Windows versions 5 and 5.5 will display at all times. There are merits in both box models, as we’ve already discussed in The Internet Explorer 5 Box Model.