幅と余白とＤＴＤの関係とは？　その１　～標準準拠モードと互換モード～

幅と余白の関係とは？　その１　～余白を含めるか否か～

　ここに４つのボックスが並んでいます。それぞれ高さは80ピクセル、幅は150ピクセルに設定してあります。

　ここで問題です。緑のボックス■に余白（パディング）を左右に25ピクセル設定したら、緑のボックスの横幅はどのように表示されるでしょうか？

　答えは以下の通り、緑のボックス■は、左右の余白合計50ピクセル分だけ幅が広がり、合計で200ピクセルのボックスとして表示されます。これは、表示モードが標準準拠モードの場合に適用されるルールです。これに対して、表示モードが互換モードになると、横幅は余白を含めた数値として表示されます。

　表示モードは、ＨＴＭＬの冒頭部分でバージョンを宣言するためのＤＴＤ（文書型宣言）のタイプ（３種類）により「標準準拠モード」と「互換モード」の２種類に分かれます。