Treehouse: 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 for the element it applies to.

.module {
  box-sizing: border-box;    
}

One of the more common ways to use it is to apply it to all elements on the page, pseudo elements included:

*, *:before, *:after {
  box-sizing: border-box;
}

This is often called "universal box-sizing", and it's a good way to work! The (literal) width you set is the width you get, without having to perform mental math and manage the complexity that comes from widths that come from multiple properties. We even have a box-sizing awareness day around here.

Values

  • content-box: the default. Width and height values apply to the element's content only. The padding and border are added to the outside of the box.
  • padding-box: Width and height values apply to the element's content and its padding. The border is added to the outside of the box. Currently, only Firefox supports the padding-box value.
  • border-box: Width and height values apply to the content, padding, and border.
  • inherit: inherits the box sizing of the parent element.

Example

This example image compares the default content-box (top) to border-box (bottom):

The red line between the images represents the elements' width value. Notice that the element with the default box-sizing: content-box; exceeds the declared width when the padding and border are added to the outside of the content box, while the element with box-sizing: border-box; applied fits completely within the declared width.

Using Box Sizing

Let's say you set an element to width: 100px; padding: 20px; border: 5px solid black;. By default, the resulting box is 150px wide. That's because the default box sizing model is content-box, which applies an element's declared width to its content only, placing the padding and border outside the element's box. This effectively increases how much space the element takes up.

If you change the box-sizing to padding-box, the padding is pushed inside the element's box. Then, the box would be 110px wide, with 20px of padding on the inside and 10px of border on the outside. If you want to put the padding and the border inside the box, you can use border-box. The box would then be 100px wide — the 10px of border and 20px of padding are both pushed inside the element's box.

Demo

See the Pen Comparison of box-sizing values by CSS-Tricks (@css-tricks) on CodePen.

Related

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any *† 3 *† 1 ‡ 7 * 8 * 2.1 *† Any *

* padding-box not supported

† older versions require -webkit prefix (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

-moz prefix required up to version 28, unprefixed as of 29.

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. Chris Roberts
    Permalink to comment#

    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.

    • Chris Coyier
      Permalink to comment#

      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. tzi
    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. Matthew Vaughan
    Permalink to comment#

    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. Jan
    Permalink to comment#

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

  10. npprogrammers
    Permalink to comment#

    The Article was good!but i was confused at using box sizing section.
    Actually
    width of content: 100px;
    padding : 20px;
    border : 5px;
    Total : 125px;
    but you are show it as 150px, how it was happen

  11. vasanth
    Permalink to comment#

    I have two div’s and giving same width for them and same number of columns and using the upper div as header and lower one as the body for the header and now in thi..if padding is removed for both of them they are aacquiring same width but if i give padding: 10px; then they are differing by 0.5px difference..I gave box-sizing but the issue is still present..

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```