CSSで行間を設定する方法

文章が長くなったりした時やデザインの問題によって、そのままの行間では文章が読みにくくなることがあります。

そんな時はline-heightという行間を調節するプロパティを使用することで、行間を調節します。

指定の値

初期値

初期値は（normal）になります。ブラウザ指定の行間です。

絶対値

絶対値の単位には（px, cm, mm, in, pc）があります。この中でよく使用されるのはpxです。pxは、１ピクセルを１とする絶対単位のことです。

相対値

相対値の単位には（%, em, ex）があります。これは、基準となるフォントのサイズに対して相対的に決まります。よく使用されるのはemで、これは文字の高さを１として、ユーザーの環境によって値が決まる相対単位です。

デフォルトでは１em=16pxになっているので、特にフォントサイズが指定されていない場合はこれが適用されます。

exは、文字のxの高さを1として値が決まる相対単位です。

具体的な使い方

CSSの書き方は上記の様になります。例えば、ページ全体の行間を指定したい場合は次の様になります。

行間を指定する時の値は、行間のみの値ではなく、文字の大きさと上下の余白（行間の）合計になります。つまり%で指定すると100%は文字の大きさの高さと同じになる為、100%以上を指定することになります。