Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    box-sizing

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Summary

    The box-sizing CSS 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.

    • Initial value content-box
    • Applies to all elements that accept width or height
    • Inherited no
    • Media visual
    • Computed value as specified
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: content-box | padding-box | border-box
    
    box-sizing: content-box
    box-sizing: padding-box
    box-sizing: border-box
    
    box-sizing: inherit
    

    Values

    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 padding, border or margin. Note: Padding, border & margin will be outside of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 370px;}
    padding-box
    The width and height properties include the padding size, and do not include the border or margin. 
    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 in Quirks mode. Note: Padding & border will be inside of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 350px;}

    Examples

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

    Specifications

    Specification Status Comment
    CSS Basic User Interface Module Level 3
    The definition of 'box-sizing' in that specification.
    Working Draft  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 -webkit [1]
    10.0
    1.0 (1.7 or earlier)-moz[1]
    29.0 (29.0)

    8.0 [1]

    7.0 3.0 (522)-webkit
    5.1 (534.12)
    padding-box Not supported 1.0 (1.0) Not supported Not supported Not supported
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 2.1-webkit [1]
    4.0
    1.0 (1.0)-moz [1]
    29.0 (29.0)
    Mango 7.5 (Yes) (Yes)
    padding-box Not supported 1.0 (1.0) Not supported Not supported Not supported

    Notes

    [1] box-sizing is not respected when the height is calculated from window.getComputedStyle(), in Internet Explorer, in Firefox prior to 23, and in Chrome. Note that IE9's proprietary currentStyle property does return the correct value of height.

    See also

    Hide Sidebar