トップページの中の プロパティの中の Hのプロパティ一覧の中の height

height

  • 最終更新:2009年11月18日 23:13

heightプロパティは、ブロックレベル要素と置換要素(img要素とかtextarea要素など)が生成するボックスの内容領域の幅を指定します。
このプロパティを非置換インライン要素(strong要素とかspan要素など)に指定した場合は無視されます。

通常、ボックスの高さを固定するのに使いますが、IE6においては、heightプロパティの指定が有った場合でもmin-heightプロパティと似たような動きをしたり、それを利用したバグ対策などにも使われます。

対応ブラウザ
  • IE6一部対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

<長さ>|<パーセント>|auto|inherit
初期値
auto
適用される要素
全ての要素(非置換インライン要素及びテーブルの列・列グループ要素は除く)
継承
しません
パーセント値
包含ブロックの高さに対する割合
メディア
visual

値の解説

<長さ>
高さを長さの単位で指定します(120pxとか)。尚、マイナス値は不正です。
<パーセント>
包含ブロックの高さに対する割合を指定します。
包含ブロックの高さが明示されていない場合で、内容領域の高さに依存しているとautoとして解釈されます。尚、マイナス値は不正です。
auto
要素やボックスの種類、関連するプロパティの値によって異なります。

heightのサンプル

div.item {
  height: 150px;
  margin: 20px;
  padding: 15px;
  border: 5px solid #ccc;
}
<div class="item">
<p>
heightプロパティが指定されていると、高さが固定されます。<br />
指定した高さからはみ出した部分の表示方法はoverflowプロパティで指定します。
</p>
</div>

内容に関わらず150pxの高さでボックスが表示されます。
内容領域の高さのため、marginプロパティやpaddingプロパティ、borderプロパティの影響は受けません。

サンプルのブラウザ上の表示

heightプロパティが指定されていると、高さが固定されます。
指定した高さからはみ出した部分の表示方法はoverflowプロパティで指定します。

このページの上部へ