CSSの「line-height」で行間を調整する

ちょっと迷ったのでメモ

文章が短い時

<p>おはよう。</p>
<p>こんにちは。</p>

上の文章の行間を開けたい時は、pタグのスタイルでmarginを調整すれば良い。

*{
    margin:0;
    padding:0;
    border:0;
}
p{
    margin-top:10px;
}

文章が長い時

<p class="test2">ある日の暮方の事である。一人の下人げにんが、羅生門らしょうもんの下で雨やみを待っていた。
　広い門の下には、この男のほかに誰もいない。ただ、所々丹塗にぬりの剥はげた、大きな円柱まるばしらに、蟋蟀きりぎりすが一匹とまっている。羅生門が、朱雀大路すざくおおじにある以上は、この男のほかにも、雨やみをする市女笠いちめがさや揉烏帽子もみえぼしが、もう二三人はありそうなものである。それが、この男のほかには誰もいない。</p

今度はmarginで調整しても段落の間を調整することになるので、行間の調整にはならない。

p.test2{
    font-size:15px;
    /*line-height:25px;*/
    line-height:2.0;/*30pxと同じ*/
}

このような場合は、「line-height」を使う。「line-height」の値はフォントのサイズと上下の余白を足した大きさになる。line-height = 5px(上の余白) + 15px(フォントサイズ) + 5px(下の余白) = 25pxである。

値の指定の仕方はXXpx,XX%,XXem,数値とあり、px以外はフォントサイズにその値を掛けた大きさになる。
line-height－スタイルシートリファレンス