Grow your CSS skills. Land your dream job.

box-sizing

Last updated on:

* {
   -moz-box-sizing:    border-box;   /* Firefox 1, probably can drop this */
   -webkit-box-sizing: border-box;   /* Safari 3-4, also probably droppable */
    box-sizing:        border-box;   /* Everything else */
}

The box-sizing property in CSS controls how the "box model" is handled in regards to page layout. For instance, if you set an element to width: 100px; padding: 20px; border: 5px solid black; the resulting box is 150px wide. That is because the default box-sizing model is content-box, which behaves that way. Through the box-sizing property we can change that to padding-box (in which case the box would be 110px wide with 20px of padding on the inside), or border-box (in which case the box would be 100px wide with 10px of border and 20px of padding on the inside).

See this example comparing default content-box to border-box:


This is particularly useful on things like <textarea> which you need to explicitly set to 100% width if you want it to fill a parent container, but is also likely you want padding on. Without box-sizing, you would an elaborate faking strategy involving extra wrapper elements.

This also makes fluid/float/grid layouts a lot easier where you want to use percentages for the grids but with fixed pixel padding.

More Information

Browser Support

Bug in Firefox with using border-box with min-height and max-height.

Chrome Safari Firefox Opera IE Android iOS
any 3+ 1+ 7+ 8+ ? any

Comments

  1. m_gol
    Permalink to comment#

    I know this is not the newest article but it’s still “googlable” and it has a crucial error: a prefix is needed for any Firefox version, even current Firefox Nightly 22. If anyone follows the author’s advice without checking and drops prefixes, the site will be broken completely in Firefox.

  2. As already noted, the prefix continues to be required by Firefox, and one additional note/update: the Firefox bug, noted in Browser Support, was fixed in Firefox 17, as noted on the same MDN page: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  3. Martijn
    Permalink to comment#

    It might be helpful to also write about how the box-sizing property affects the various javascript width/height properties. Although I know how quite well box-sizing affects CSS properties, in javascript it’s usualy a matter of trial & error to find the one most suited for the job.

  4. ngwdaniel
    Permalink to comment#

    I think in the first case (content-box) the width would be 150px (100px + 2 * 20px + 2 * 5px), not 140px.

    • Adam
      Permalink to comment#

      I agree with this comment. Total width of the box for content-box is: width + padding + border. The width of the content is set to 100px + the width of the padding is set to 20px for both sides + the width of the border is set to 5px for both sides. Your equation, as ngwdaniel mentioned, is therefore (100px + 2 * 20px + 2 * 5px) which equals 150px.

    • Correct, fixed.

  5. Daniele Manca
    Permalink to comment#

    Hey folks,

    I am trying to apply this property to fix a problem I have on the below page,

    http://hdl.fitzroviadigital.co.uk/corporate-investment-banking/

    The main section is creating a white space between the section img and the aside, however even by applying box-sizing: border-box to the universal selector, nothing changes,

    Any clues?

  6. Permalink to comment#

    Thanks for sharing this article!

    One note, the Firefox bug with min / max-height seems to be fixed since the version 17.

    Cheers,
    Thomas.

  7. Roland Hentschel
    Permalink to comment#

    Hi,

    I’m having problems with Safari and Seamonkey, when using border-box on floated divs

    ) http://rh-balingen.de/FLUID-GRIDS/floating.html

    The height can’t be %, but has to be px.

    ) http://rh-balingen.de/FLUID-GRIDS/safari.html

    When using relative and absolute positioning, % is OK.

    ) http://rh-balingen.de/FLUID-GRIDS/relative.html

    I just don’t understand, what the problem is …

  8. Just a note that the comment in the code next to -moz-box-sizing still says “Firefox 1, probably can drop this”. Should say “Firefox 1-28″.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".