ウェブランサー

line-height - 行の高さを指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素
継承 する

line-heightプロパティは、行の高さを指定する際に使用します。行の高さは、マイナス値を指定する事はできません。line-heightプロパティをbodyに対して指定する場合には、バグ対策として単位を指定せずに数値のみで記述する事を推奨します。

line-heightに与えられる値

line-height: normal;
ブラウザごとの標準の行の高さになります。これが初期値です。
line-height: 単位で指定する;
[px]、[em]、[ex]などの単位で指定します。
line-height: %指定;
親要素からの相対的な割合を、%値で指定します。
line-height: 数値のみで指定する;
単位をつけずに数値のみを指定すると、その数値にフォントのサイズを掛けた値が行の高さとなります。[2]と指定すれば「フォントサイズの2倍」という事になります。

line-heightの使用サンプル

CSS
.text_sample01 {
 line-height: 200%;
 border: 1px solid #666666;
 padding: 5px;
 margin-bottom: 10px;
}
.text_sample02 {
 line-height: 3em;
 border: 1px solid #666666;
 padding: 5px;
 margin-bottom: 10px;
}
.text_sample03 {
 line-height: 1.5;
 border: 1px solid #666666;
 padding: 5px;
}
XHTML
<div class="text_sample01">
text_sample01 [line-height: 200%;]<br />
テキスト<br />
テキスト<br />
テキスト<br />
</div>

<div class="text_sample02">
text_sample02 [line-height: 3em;]<br />
テキスト<br />
テキスト<br />
テキスト<br />
</div>

<div class="text_sample03">
text_sample03 [line-height: 1.5;]<br />
テキスト<br />
テキスト<br />
テキスト<br />
</div>
表示確認
text_sample01 [line-height: 200%;]
テキスト
テキスト
テキスト
text_sample02 [line-height: 3em;]
テキスト
テキスト
テキスト
text_sample03 [line-height: 1.5;]
テキスト
テキスト
テキスト

line-heightに関連するCSSプロパティ

文字揃え・段落の振る舞い
baseline-shift 優先するベースラインを指定し直す
direction 文字表記の方向(左右)を指定する
drop-initial-after-adjust 頭文字の第一接続点の揃え位置を指定する
drop-initial-after-align 頭文字の第一接続点の揃えラインを指定する
drop-initial-before-adjust 頭文字の第二接続点の揃え位置を指定する
drop-initial-before-align 頭文字の第二接続点の揃えラインを指定する
drop-initial-size 頭文字のサイズを指定する
drop-initial-value 頭文字を何行分にするかを指定する
letter-spacing 文字の間隔を指定する
line-break 要素内での行末や行頭の禁則処理の厳密さを指定する
line-height 行の高さを指定する
line-stacking 行ボックスに関する指定をまとめて行う
line-stacking-ruby 行ボックスを重ねる際のルビの扱いを指定する
line-stacking-shift 文字のベースラインを考慮するかどうかを指定する
unicode-bidi 文字表記の方向(左右)を指定する
white-space テキスト内の空白、タブ、改行の表示の仕方を指定する
word-break 文章の改行の仕方について指定する
word-spacing 単語の間隔を指定する
word-wrap 単語の途中における改行処理の仕方を指定する
writing-mode 文字表記の方向(縦横)を指定する