line-heightプロパティは行間を指定するプロパティですが、同じHTML内で均一の行間にしている場合、h1要素とp要素などの要素で見え方に違いがでる場合はないですか？全て共通の値にる場合フォントサイズによって見え方が変わり、それはpxや%などの値で指定した場合に起こります。その場合解決方法を記録します。

CONTENTS

• 1.line-heightをpxや％で指定した場合
• 2.line-heightを数値のみで指定する

1.line-heightをpxや％で指定した場合

行間をpxや%などの単位をつけて指定した場合は以下のようになります。

pxで指定した場合

h1要素がフォントサイズ24pxでline-heightが13pxに指定しているので当然改行した場合、文字が重なります。

%で指定した場合

%で指定した場合はフォントサイズが10pxの場合130%にすると13pxになります。結果はさきほどのpx指定と同じような表示になります。

2.line-heightを数値のみで指定する

今度は同じ内容を数値のみで指定してみたいと思います。数値のみとは単位を入れずに数字だけを記入します。

line-heightを単位なし数値のみで指定することでどのサイズでもおなじ比率で行間を指定することができました。指定のフォントサイズ×全体のline-height=指定のline-heightの値になります。いかがでしょうか。この方法だとline-heightをいちいち場所によって変更する必要がないので、基本単位なしで使うのがいいとおもいます。ぜひ活用されてみてください。