【CSS】行間を調整する方法

本日はCSSで行間を設定する方法について書きたいと思います！！

■使うプロパティ

.sample{

line-height:値;

}

■解説

line-heightで指定する値のパターンは下記3つです。

1：「px、em」で数値を指定

2：数値のみで指定

3：%で数値を指定

1：px,emで指定する場合

例えば文字のフォントサイズが20pxの要素に対して

40pxでline-heightを指定すると、

文字の上下に10pxずつ余白を取ります。

2：数値のみで指定する場合

例えば2で設定すると、

40px(20×2)で文字の上下に10pxずつ余白をとります。

3：%で設定する場合

例えば200%で設定すると、

40px(20×200％)で上下に10pxずつ余白を取ります。

どの方法が楽かについてですが、

個人的には3の％で設定する方法がおすすめです。

1と2はフォントサイズに合わせて設定しなければいけないですが

%だとフォントサイズに自動的に合わせてくれるので

余計な手間が省けるかと思います。