Fandom

HTML & CSS Wiki

Box-sizing

649pages on
this wiki
Add New Page
Comments0 Share

As an adaptation of content from the Mozilla Developer Center, this page is only available under the CC-BY-SA license, 2.5, or later.

The CSS box-sizing property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. Firefox and Safari only support their own vendor extensions, -moz-box-sizing and -webkit-box-sizing.

Values

Value Description
content-box This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the border, margin, or padding.
padding-box The width and height properties include the padding size, and do not include the border or margin. This is a non-standard property which is only supported by Gecko (Firefox).
border-box The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is not in standards-compliant mode.


Example

/* support Firefox, Safari, Opera and IE8 */
 
.example {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

Browser compatibility

-moz-box-sizing (Firefox) and -webkit-box-sizing (Safari) implement this part of the CSS specification. Opera (Mobile 10 and Desktop 10.5) and Internet Explorer 8 support the ordinary box-sizing property.

External links

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.