The CSS property known as –moz-box-sizing may be utilized to specify the CSS box model. This can be used to determine the elements corresponding to height and width. This property is very much similar to the proposed CSS3 property known as box-sizing. But just like other properties this also exhibits differences.

The example below shows that the border-box box model is purported to be used as a way 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 code above will generate this:

Figure 1. Mozilla border-box dimensions

As it can be observed, the padding and borders are not added to the element’s overall width or height. But rather, 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.

This property is compatible with Firefox but not to other browsers like Safari, Opera and Internet Explorer. So, there are a number of authors not so much inclined with this method as it tends to limit possible readership especially if you want them to see the true appearance of what you designed.

Tags: The -moz-box-sizing CSS Property