line-height

TOPページに戻る > CSS

line-heightプロパティ　（ラインハイト）

行の高さを指定プロパティです
行の高さを大きくすれば行間が広がり、読みやすい文章になります
値にはpxや倍数、%で指定できます
font-sizeより行の高さが多い分だけ行間が広がります
16pxのline-heightを指定し、12pxのfont-sizeを指定すると上下に2pxの余白ができます

使い方（書式）

セレクタ { line-height : 値; }                                    

プロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	する

プロパティの値	説明
単位	px、emなどの単位
%	パーセンテージ
倍数	倍数で指定。1.2は120%と同じ意味です。書くのが簡単なので一番使うのがこれ
normal	通常の行の高さ

実際の指定方法

.hoge { line-height: 18px; }    /* pxで指定 */

.hoge2 { line-height: 1.6; }     /* 倍数で指定 */

.hoge3 { line-height: 160%; }    /* %で指定、倍数1.6と同じ */

.hoge4 { line-height: normal; }  /* 通常の行の高さ */

html部分

<p class="hoge">1行目<br>2行目　行の高さを18pxに指定</p>
<p class="hoge2">1行目<br>2行目　倍数1.6に指定</p>
<p class="hoge3">1行目<br>2行目　160%に指定、倍数1.6と同じ </p>
<p class="hoge4">1行目<br>2行目　通常の行の高さ</p>

実際の表示

1行目
2行目　行の高さを18pxに指定

1行目
2行目　倍数1.6に指定

1行目
2行目　160%に指定、倍数1.6と同じ

1行目
2行目　通常の行の高さ