[CSS] 行の高さを指定する（line-height）
行の高さを指定するには、line-heightを使用します。
サンプル
line-heightに高さを指定します。
|
1 2 3 |
p{ border:1px solid #808080; } |
|
1 2 3 4 5 6 |
<p style="line-height:80%;">あいう<br>かきく<br>さしす</p> <p style="line-height:100%;">あいう<br>かきく<br>さしす</p> <p style="line-height:120%;">あいう<br>かきく<br>さしす</p> <p style="line-height:140%;">あいう<br>かきく<br>さしす</p> <p style="line-height:30px;">あいう<br>かきく<br>さしす</p> <p style="line-height:50px;">あいう<br>かきく<br>さしす</p> |
見た目サンプル
100%だと文字の高さと行の高さが同じになります。
【80%】
あいう
かきく
さしす
【100%】
あいう
かきく
さしす
【120%】
あいう
かきく
さしす
【140%】
あいう
かきく
さしす
【30px】
あいう
かきく
さしす
【50px】
あいう
かきく
さしす
補足
- 値は、%やpx、emが指定できます。
- line-heightについては以下サイトもご覧ください。
⇒ line-height（CSS3スタイル虎の巻）