line-heightと美しい文字組み

ウェブページを作るときline-heightは指定していますか?

line-heightは文章の行間を制御するためのCSSプロパティですが、美しいと感じる文字組みを実現するには、ちょっとした工夫が必要です。

まず、line-heightの基礎。

例えば、文字サイズ12px相当のp要素にline-height: 2;を指定したとします。すると、文字サイズの2倍の行間を指定したことになるので、文字上部の余白6px、文字サイズ12px、文字下部の余白6pxの計24pxとなります。

font-size: 12px; line-height: 2; border: 1px solid #333;が指定されたp要素の中のサンプルテキスト

上のp要素のボーダー内の余白を統一するにはpadding: 6px 12px;もしくはpadding: 0.5em 1em;を指定します。

font-size: 12px; line-height: 2; border: 1px solid #333; padding: 0.5em 1em;が指定されたp要素の中のサンプルテキスト

ただし、line-heightプロパティはインラインレベル要素やテキストそのものに対して有効なので、ブロックレベル要素を子要素に持つ、ブロックレベル要素の中の余白を統一することはできません。

font-size: 12px; line-height: 2; border: 1px solid #333; padding: 0.5em 1em;が指定されたdiv要素の中のfont-size: 12px; line-height: 2; border: 1px solid #333; margin: 0; padding: 0.5em 1em;が指定されたp要素の中のサンプルテキスト

上のp要素はdiv要素の中にあります。p要素の中は余白が統一されているのに対し、div要素の中の余白は統一されていません。

つまり、親要素となるブロックレベル要素の余白を統一するためには、親のブロックレベル要素の中に別のブロックレベル要素を入れて、更にその中にp要素を入れるといった工夫が必要です。

font-size: 12px; line-height: 2; border: 1px solid #333; padding: 0.5em 1em;が指定されたdiv要素の中のpadding: 0.5em 0;が指定されたdiv要素の中のfont-size: 12px; line-height: 2; border: 1px solid #333; padding: 0.5em 1em;が指定されたp要素の中のサンプルテキスト

ありそうな事例としては、ボーダーを指定したブロックレベル要素の中にtable要素を入れる場合などでしょうか。

それから、要素間のマージンを指定するとき、line-heightプロパティの値と同じ値を指定すると(例: line-height: 2; margin: 2em 0;)、ちょうど1行分空くことになります。blockquote要素の中のp要素は0.5行分、通常のp要素は1行分、h要素は2行分のように、コーディングルールを決めておくといいかもしれません。

ちなみに、よくある問題の1つとして、画像の下に余白が空いてしまうというのがあります。これは文字下部の行間によってできた余白と、vertical-alignプロパティの初期値がbaseline(文字下部に揃える)であることが原因です。

なので、line-heightの値を1以下にする、もしくはvertical-alignの値にtopやmiddleを指定する、あるいは画像(img要素)に対してdisplay: block;を指定する、このいずれかで余白はなくすことができます。