行間を設定する


CSSで行間を設定したい場合、line-heightプロパティを使用します。

p {
line-height:1.6;
}

なお単位を付けて指定することができますが、注意が必要です。
例えば絶対値の「px」をつけて指定してみます。
※見やすくするため、サンプルにはmarginとborderを設定しています。

p {
line-height:11px;
}

pxをつけて指定しています。pxをつけて指定しています。pxをつけて指定しています。pxをつけて指定しています。

 
極端な例ですが、当サイトの本文のfont-sizeは15pxに設定しているので、
上記のように文字が重なってしまいます。
相対値の「%」「em」で指定するときも 場合によっては注意が必要です。

p {
line-height:1.5em;
}

span {
font-size:40px;
}

相対値でも注意が必要。相対値でも注意が必要。相対値でも注意が必要。相対値でも注意が必要。ここだけ大きく。相対値でも注意が必要。相対値でも注意が必要。

上記のようにspanタグで特定の文字を大きくした場合などに、
字間が詰まり、窮屈に見えてしまう場合があります。
なお単位を付けず、数字だけで指定すると上記の問題は起こりません。

p {
line-height:1.5;
}

span {
font-size:40px;
}

相対値でも注意が必要。相対値でも注意が必要。相対値でも注意が必要。相対値でも注意が必要。ここだけ大きく。相対値でも注意が必要。相対値でも注意が必要。

このようになります。
ですので、基本的には単位なしで設定するのが良いようです。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る