CSSによるwidth（横幅）の解釈方法

■ 解答

正解は、444px です。

横幅（width）が400pxと記述されていますので、ボックス全体（コンテンツ、余白、詰め、枠線）の横幅が400pxと思われるかもしれませんが、CSSはそのように解釈してくれません。

全体の横幅は、
「コンテンツ、余白（左、右）、詰め（左、右）、枠線（左、右）」
を足した数値と解釈されます。

つまり、
「コンテンツ+余白左+余白右+詰め左+詰め右+枠線左+枠線右 = 全体の横幅」
という計算式になります。

ですので、上記の例では、
「400（コンテンツ）+10（余白左）+10（余白右）+10（詰め左）+10（詰め右）+2（枠線左）+2（枠線右）= 444px」
ということになります。

ブラウザによる解釈の違い

CSSによるボックス全体の横幅の求め方について説明しましたが、気を付けなければならない問題があります。
それは、古いブラウザでは、これまで説明した解釈方法とは違う解釈をしてしまうということです。

ここでいう古いブラウザとは、Windows版IE4～5.x 、Mac版IE4.xです。
これらのブラウザは、以下のように解釈します。

widthは、
「コンテンツ、詰め（左、右）、枠線（左、右）」
を足した数値と解釈されます。

つまり、widthを400pxとした場合は、枠線と詰めの数値を引くとコンテンツエリアの横幅になり、計算式は。
「横幅-詰め左-詰め右-枠線左-枠線右 = コンテンツの横幅」
になります。

ですので、上記の例では、
「400（横幅）-10（詰め左）-10（詰め右）-2（枠線左）-2（枠線右）= 376px（コンテンツの横幅）」
ということになります。

全体の横幅は、
「横幅、余白（左、右）」
を足した数値と解釈されます。

「横幅+余白左+余白右 = 全体の横幅」

ですので、上記の例では、
「400（横幅）+10（余白左）+10（余白右）
=420px」
ということになります。

このように、同じ記述でもブラウザによっては、下の表のように、横幅の解釈が異なってきますので、レイアウトが崩れてしまったりする問題が生じたりします。

ブラウザ	ボックス全体	コンテンツ幅
モダンブラウザ （Windows版IE6.x、 　Mac版IE5.x）	444px	400px
古いブラウザ （Windows版IE4～5.x、 　Mac版IE4.x）	420px	376px

このようなブラウザによる解釈の違いを回避する方法については、次回説明します。

[次の講義へ] ブラウザの解釈対策（（Windows IE 5.x編）

参考になりましたら、応援お願いします。