cssでは、各要素がボックスという領域を作り出します。ボックスは、「マージン（margin）」「ボーダー（border）」「パディング（padding）」「内容領域」から成り立ち、 そのmargin、border、padding、内容（contents）、各領域の関係は上の図のようになります。 borderから外側の余白をmargin、borderから内側の余白をpaddingで指定します。 カラム（段組）のページで、内容が入るメイン部分のid名をcontentsとしましたので（contents）と書いています。 同じくボックス生成にdiv要素を使いましたので、（div）と書いています。

widthやheightは、ブラウザやそのバージョンによって解釈が異なるようですが、CSSではpaddingより内側をwidthと定めています。以下は検証結果です。

上の図のように、width:200px;（横幅）、height:200px;（縦）、margin:10px;（マージン）、border:10px;（ボーダー）、padding:10px;（パディング）と 指定したボックスの領域がブラウザやバージョンによって、どのように変わるか試してみました。（marginの部分は透明で見えませんので点線を引いてます。）

widthとheightの大きさ200pxをピクセル定規で測った結果です。IE5以外は、paddingの内側がwidth:200px、height:200pxになっています。IE5では、width、heightはborderまで含んでいます。 表示のされ方がかなり違いますね。

他ブラウザやバージョンでは試してないですが、ページをレイアウトする時は、どんな環境でも同じように表示されるよう、こういう点にも気をつけて作られたらいいですね。

※ ボックス全体の横幅は、「margin+border+padding+width」になりますので、上記の例では、(10×2)+(10×2)+(10×2)+200で260pxとなります。