行間を設定する
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;
}
相対値でも注意が必要。相対値でも注意が必要。相対値でも注意が必要。相対値でも注意が必要。ここだけ大きく。相対値でも注意が必要。相対値でも注意が必要。
このようになります。
ですので、基本的には単位なしで設定するのが良いようです。
