ご存知の方もいらっしゃると思いますが、メモ代わりのために記事にしておきました。
xhtmlには標準モードと後方互換モードというものがあります。この違いがCSSのwidthに影響を与えます。具体的にいうとwidthの計算方法が異なります。つまり標準モードのwidthにはpaddingとborderは別ものとして考えます。つまりある要素、ここではボックスで考えます。ボックスの幅はwidth+padding+border+marginとなります。ですが、後方互換モードではwidthにpaddingとborderを含めた計算方法をするのです。つまりボックスの幅はwidth+marginとなります。
新規のページを作るのであれば標準モードでいいのですが、既存のサイトで新たに作成したり、既存ページをCSS化する場合などは注意が必要になります。わからないままコーディングするとデザインとは違うものが出来上がってしまいますからね。
ではどこで標準モードか後方互換モードかを見分けるか？それはDOCTYPEで見分けます。ソースの上部にある<!DOCTYPE ～>で始まる宣言文のことです。この書き方の違いがモードの違いになるのです。
DOCTYPEによる標準モードと後方互換モードの一覧表を紹介しているサイト様がたくさんあるので、検索してみてください。
ちなみにheightやfont-sizeのプロパティ値をキーワード(smallやlarge)で指定しても違いがでますよ。