line-height（行の送り量）

解説

行の送り量（行間）を指定する属性です。

値	normal：通常の行間 <number> <length> <percentage> 文字サイズに応じて行間が変わります。
初期値	normal
%値の基準	エレメント自身のフォントサイズ
適用	全てのエレメント
継承	する

対応状況

normal

使用例

ソース

スタイル部に、

.size13{font-size:13pt;}
.line-height13{line-height:13pt;}
.line-height20{line-height:20pt;}
.line-height200{line-height:200%;}
.line-height2{line-height:2;}

と記述し、

body部に、

<div class="size13">
<div class="line-height13">文字サイズと行間サイズが同じ場合、<br>このように行間が無くなります。</div><br><br>
<div class="line-height20">文字サイズよりも行間サイズの方が大きいと、<br>このように差分の行間ができます。</div><br><br>
<div class="line-height200" style="font-size:medium;">ここは、エレメント自身のフォントサイズの200%<br>が行間サイズになります。</div><br><br>
<div class="line-height2">ここは、現在のフォントサイズの<br>２倍が行間サイズになります。</div><br></div>

と記述すると。

表示＆操作

文字サイズと行間サイズが同じ場合、
このように行間が無くなります。

文字サイズよりも行間サイズの方が大きいと、
このように差分の行間ができます。

ここは、エレメント自身のフォントサイズの200%
が行間サイズになります。

ここは、現在のフォントサイズの
２倍が行間サイズになります。

と表示されます。

pokochan@mx1.tees.ne.jp