文章の行間を設定する場合、line-heightプロパティを使用します。
イラストレーターやフォトショップ等で設定する行間とは異なりますので、デザインと合わせる場合は注意が必要です。
line-heightの設定
行間をCSSで設定する場合は、下記のように記載します。
line-height:normal;
line-height:行間で設定する値;
上のline-height:normal;を設定すると、行間をブラウザが判断してくれますが、サイズによってはかなり狭く感じる時があります。
その場合は、値を設定します。
例えば、
に行間を設定する場合は
.sample10{
line-height:1.7;
}
のような形で設定します。
単位は、pxや％、emなどを使います。（単位をつかなくても設定できます。）
line-height:170%;
line-height:21px;
のような形です。
ただし、emや%では、設定した数値に制御できずに、文字が重なったりするケースもあるので、
.sample10のline-height:1.7 のように、単位をつけずに設定するのが推奨されています。
line-heightが効かない場合がある
line-heightは、基本ブロック要素に適用されます。
インライン、spanなどでは、設定しても反映されません。
spanに設定する場合は、
display:block;
display:inline-block
を使って、インライン要素をブロック化しましょう。
