line-height
行の高さを指定するプロパティ。
値を指定することで、行間を狭めたり広げたりすることができる。なお、line-heightで指定した値がfont-sizeよりも小さい場合は、行が重なって表示される。
値
| 数値で指定 | px、pt、em等の単位で数値を指定。 |
|---|---|
| ％で指定 | 標準で指定された行の高さに対する値を％で指定。 |
使用例 - サンプル(A) / サンプル(B)
サンプル(A)
[CSSの記述]
.sampleA { line-height:30px; }
[HTMLの記述]
<p class="sampleA">テキストテキスト</p>
[ブラウザ上の表示]
line-heightの値を30pxに指定した場合、
行間はこのくらい広がります。
文字数が多い場合、行間を広げると見やすくなりますね。
サンプル(B)
[CSSの記述]
.sampleB { line-height:500%; }
[HTMLの記述]
<p class="sampleB">テキストテキスト</p>
[ブラウザ上の表示]
line-heightの値を500%に指定した場合、
行間はこのくらい広がります。
行間を広げすぎると見づらくなってしまいます。
- 前の記事：font-family
- 次の記事：text-align