スポンサーリンク
スポンサーリンク

行間を設定したいときに使う line-heightプロパティ

CSS

行間を設定して文字を読みやすくする。

行数の多いリストや文字数が多い段落は文字が詰まっていて
読みにくいです。ブラウザにより隙間がなく文字が詰まっている
ことがあります。

その詰まった文字を見やすくするためにCSSで
「line-height」プロパティを使い値を設定すると、
行間を設定ができ文字がみやすくなります。

line-heightプロパティには、文字サイズの指定と
同様に色々な単位で行間を指定できます。%やemと
いった相対的な値を設定をしますが、他の単位も
つかうことができます。

サンプルコードではline-heightプロパティに
150%という値を設定しています。

line-heightで指定した値を割り振る

サンプルコードではline-height:150%と指定しています。
文字の高さの上から下までが、line-height:100%です。

line-height:150%と指定した場合は
残りの50%は文字の高さの50%分の空きが文字の上下に
均等に割り当てられます。

行間のデフォルト値は?

行間のデフォルト値はブラウザによって違います。
フォントや文字サイズを指定してもブラウザごとに
行間が違います。

1行の見出しにもデフォルトの行間が適用されてしまい
ブラウザによってはすっきりしない隙間が出てきます。
これを防ぐには、CSSに「line-height:100%」を指定すると
防げます。

コメント

タイトルとURLをコピーしました