かえでのWebログ

W3Cで規定されている内容部分の計算

下記の色つき部分がwidthで計算されます。

margin

border

padding

contents

contents部分の幅はwidthで指定した値となります。

contents部分の幅 = widthの値

heightも同様です。

IE6の内容部分の計算

下記の色つき部分がwidthで計算されます。

margin

border
padding
contents

よって、IE6の場合はcontents部分の幅は

contents部分の幅 = widthの値 - paddingの値 - borderの値

となります。heightも同様です。

paddingがwidthに含まれることは知っていましたがborderまで含まれるとは思いませんでした。