行間を設定するプロパティ
line-height
このline-heightプロパティは行の高さを設定して行間を変更するするプロパティです。使える単位はいろいろあります
行間を設定することで読みやすい文章にすることができるかもしれません
プロパティ値の付け方はいろいろありまして
- 数値のみで指定
- 数値にpxやem・%などの単位を付けて指定
があります。ひとつづつ見ていきましょう
数値のみで指定
まずは下のようなCSSがあったとします
|
1 2 3 4 |
p{ font-size:20px; line-height:2; } |
数値だけで設定していますね、この場合は文字の大きさに対する倍率の設定になります
なので上記コードであれば
文字の大きさ20pxと行間に設定した「２」を掛け算してあげれば実際の行間がわかります。このサンプルでは40pxが行の高さ
文字の大きさをきっちり設定していたり、それぞれの要素のデフォルト値が覚えられていれば簡単に余白分を導き出せると思いますが慣れるまでは難しいかもしれません。
数値にpxやemなどの単位を付けて指定
倍率とかで設定するのが難しいのであればpxやemなどの単位を付けて設定するとわかりやすいかもしれません
|
1 2 3 4 |
p{ font-size:20px; line-height:30px; } |
数値＋単位で設定しています。直感的に値を入れやすいように思います
上下余白はline-heightからfont-sizeを引いて半分にした値になります
