内容領域の高さ

説明

height: height; C1- ie4- N4-

値:	<長さ> \| <%値> \| auto \| inherit

初期値：auto、適用要素：すべて(非置換インライン要素、col、colgroup要素を除く)、継承：しない、%値：包含ブロックを参照、メディア：ビジュアル

このプロパティは、ブロック要素と置換要素(img、input、textarea、select、object要素)が生成するボックスの内容領域の高さを指定します。負の値は指定できません。インライン要素のテキストの行の高さを指定するには、line-heightプロパティを用います。

使用例


img {width:100px; height:100px}

height プロパティの値

長さ	C1- ie4- N4- 高さを指定。
%値	C2- ie4- N4- 包含ブロックの高さに対する割合を指定。包含ブロックの高さが明示されていない場合は、「auto」として解釈されます。
auto	C1- ie4- N4- CSSの算出方法によって自動的に調整されます。置換要素の場合は内在寸法と同じ高さになります。初期値。

width heightのレンダリング

ブロック要素

置換要素(img、input、textarea、select、object要素)

widthプロパティとheightプロパティ適用範囲の注意点

Windows版のIE4.0までのブラウザ、IE6.0以降の互換モード、Mac版のIE5の互換モード、Opera7.0以降の互換モード(*1)などでは、widthプロパティとheightプロパティの適用される範囲が、W3Cの定める標準的な仕様とは異なっています。仕様において内容領域の幅や高さを設定するはずのものが、これらの「互換モード」においては内容領域の外側にあるボーダーとパディングを含んだ領域の幅や高さとして設定されます。特にボーダーを太くしたり、パディングを広く取る場合などには、W3Cの仕様に沿った正しい表示を行うブラウザとはまったく異なる表示結果となるので、注意が必要です。「標準モード」では内容領域の幅と高さを示します。

*1 現行のOpera9においては改善されています(2007/01/10)。

DOCTYPE Doctypeスイッチ

互換モードほぼ標準モード標準モード

内容領域の高さ (Content height)

説明

使用例

height プロパティの値

heightの値別のレンダリング

width heightのレンダリング

widthプロパティとheightプロパティ適用範囲の注意点