Grow your CSS skills. Land your dream job.

box-sizing

Last updated on:

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).

* {
   -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 */
}

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.

Other Resources

Browser Support

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

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

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″.

  9. Permalink to comment#

    -webkit prefix needed for Android default browser (Android 2.3.6)

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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