HTMLなどマークアップ言語の各要素は、ボックスと呼ばれる四角い領域を生成します。この領域は、次の4つの部分から構成されています。
テキストや画像などの、要素の内容が表示される領域です。この領域の幅と高さは、
widthプロパティと
heightプロパティで指定することができます。
内容領域と
ボーダー間の空間部分を
パディングと呼びます。要素に対して指定された背景はこの領域にも描画されます。
要素の周りに表示させることができる枠の部分を示します。要素に指定された背景は、この領域にも適用されることになっているため、
ボーダーを透明(transparent)にすると背景が透けて見えるようになります。
ボックスの一番外側の
マージン領域を示します。要素に対して指定された背景は、ここには表示されず、背景は常に透明となります。
インライン要素もボックスを生成しますが、テキストの行の高さを調整する目的で
マージン、
ボーダー、
パディング、
heightプロパティなどを指定しても行の高さは何ら影響を受けません。テキストの行の高さを指定するには
line-heightプロパティを用います。
widthプロパティとheightプロパティ適用範囲の注意点
Windows版のIE4.0までのブラウザ、IE6.0以降の互換モード、Mac版のIE5の互換モード、Opera7.0以降の互換モード(
*1)などでは、
widthプロパティと
heightプロパティの適用される範囲が、W3Cの定める標準的な仕様とは異なっています。仕様において内容領域の幅や高さを設定するはずのものが、これらの「
互換モード」においては内容領域の外側にある
ボーダーと
パディングを含んだ領域の幅や高さとして設定されます。特に
ボーダーを太くしたり、
パディングを広く取る場合などには、W3Cの仕様に沿った正しい表示を行うブラウザとはまったく異なる表示結果となるので、注意が必要です。「
標準モード」では内容領域の幅と高さを示します。
*1 現行のOpera9においては改善されています(2007/01/10)。
DOCTYPE Doctypeスイッチ
互換モード ほぼ標準モード 標準モード