CSS does the width include the padding?

Question

It seems that in IE, the width includes the padding size. while in FF, the width does not. How can I make both behave the same?

Thanks.

Answer 1

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