CSS does the width include the padding?

• IE used to use the more-convenient-but-non-standard "border-box" box model. In this model, the width of an element includes the padding and borders. For example:
  #foo { width: 10em; padding: 2em; border: 1em; }
  would be 10em wide.

• In contrast, all standards-fearing browsers default to the "content-box" box model. In this model, the width of an element does not include padding or borders. For example:
  #foo { width: 10em; padding: 2em; border: 1em; }
  will actually be 16em wide: 10em + 2em padding for each side, + 1em border for each edge.

If you use a modern version of IE with valid markup, a good doctype, and appropriate headers it will adhere to the standard. Otherwise, you can force modern standards-compliant browsers to use "border-box" via:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

The first declaration is needed for Opera, the second is for Firefox, the third is for Webkit and Chrome.

Here's a simple test I made years ago for testing what box-sizing declaration your browser supports: http://phrogz.net/CSS/boxsizing.html

Note that Webkit (Safari and Chrome) do not support the padding-box box model via any declaration.

A simple rule is to try to avoid using padding/margin and width property for same element. i.e. Use something similar to this

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

I bumped into this question and even though it's a couple of years old, I thought I might add this in case anyone bumps into this thread.

CSS3 now has a box-sizing property. If you set, say,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

your class will be 1000px wide, instead of 1030px. This is, of course, incredibly useful for anyone who uses pixel-sized border with liquid divs, because it solves an otherwise insoluble problem.

Even better, box-sizing is supported by all major browsers except IE7 and below. To include all items within the width or height dimension, set box-sizing to border-box. To aggregate other items to the width and/or height, which is the default, you can set box-sizing to "content-box".

I'm not sure of the current state of browser syntax, but I still include -moz and -webkit prefixes:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}