line-heightプロパティ。

CSSに於ける一行の高さ・line-heightプロパティに関する解説です。

line-heightプロパティとは。

line-heightプロパティは、一行の高さです。

  • このプロパティの値から文字の高さを差引いた値が行間の幅となります。

但し、画像などの置換インライン要素はこのプロパティの影響を受けません。

line-heightプロパティの扱い。

line-heightプロパティの書式。

line-heightプロパティの書式は、以下のようになります。

line-height:

値としては、以下のものが取れます。

inherit
一番近い上位要素で指定された値を継承します。
normal
適切な値(フォントサイズの1.0〜1.2倍くらい)とします(デフォルト)。
数値
フォントサイズ基準の比率を実数で指定します。em単位と同じように見えますが、この場合下位要素へは比率のみが継承され、下位要素ではその都度継承された比率で計算される事になります。
  • 負の値を指定した場合はエラーとなります。
パーセンテージ
パーセンテージを指定した場合は、当該要素のフォントサイズに対するパーセンテージとなります。
  • 負の値を指定した場合はエラーとなります。
大きさ
em単位及びex単位の場合は、当該要素のフォントサイズを基準にします。
  • 負の値を指定した場合はエラーとなります。

line-heightプロパティの記述例。

例えば、基本的に1.2倍の高さとする場合は、

em {
    line-height: 1.2;
    }

または

em {
    line-height: 1.2em;
    }

と記述します。

line-heightプロパティに関する注意事項。

line-heightプロパティの仕様上(使用上?)の注意。

1.0, 100% 及び 1em より小さな値を指定した場合、行と行が重なってしまう事になります。

line-heightプロパティの実装上の注意。

ネットスケープ 4.xでの注意事項。

ネットスケープ 4.xでは、line-heightプロパティを与えた要素内に画像などが入ると、画像もline-heightプロパティの影響を受けてしまい、結果画像にテキストが重なってしまう事があります。

ですから、ネットスケープ 4.xではline-heightプロパティを使わないようにするか、line-heightプロパティを与えた要素内には画像を入れないようにするかのどちらかとなります。

WAP 2.0での注意事項。

WAP 2.0では、line-heightプロパティは定義されておりません

関連項目。


しらぎくのウェブサイト作成入門サイトマップ