-moz-box-sizing (CSS property)

Spec
Inherited Initial Version
No content-box CSSN/A
Browser support (more…)
IE8 FF1+ SA4 OP10 CH2
None Full None None None

Syntax

-moz-box-sizing: { content-box | border-box | padding-box } ;

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 A box sizing diagram illustrating that the border-box box model
          includes the border width and padding within the specified
          dimensions of the box rather than increasing them. Instead the
          dimensions of the available content area are reduced.

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.

Note: box-sizing in Other Browsers

Opera, since version 8.5, has supported the CSS3 box-sizing property. Safari 3 supports the -webkit-box-sizing property, which matches the specifications for the CSS3 property. Internet Explorer version 8 supports the CSS3 box-sizing.

Example

This rule will cause the browser to render the .example element using the padding-box box sizing model:

.example {
  -moz-box-sizing: padding-box;
}

Value

content-box
If this value is specified, the width and height properties represent only the dimensions of the content—they don’t include the border, margin, or padding. This reflects the default CSS2 box model.
padding-box
If the value padding-box is specified, the width and height properties include the padding size with the content dimensions, but don’t include the border or margin. This value isn’t included in the CSS3 box-sizing property specifications.
border-box
If the value border-box is specified, the width and height properties represent the sum of the padding size, border size, and the content dimensions, but don’t include the margin. This box sizing model reflects the IE5 box model.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None None Full Full Full Full Full None None None None None None None None

This is a proprietary Mozilla extension to the CSS standard.

-moz-box-sizing doesn't apply to table cells.

min-height and max-height do not work for -moz-box-sizing with a value of border-box.

User-contributed notes

There are no comments yet.

Related Products