行間を調整する
CSSの書き方
line-height:値 ;
|
|||||||||||||||||||||||||||||||||||||||||
解説
行間を調節するスタイルシートです。サイズまたはパーセントによる指定が可能です。
サイズ(数値)による指定
「14px」などサイズ(数値)で指定した場合は、そのサイズが行の高さとなります。実際に表示されている文字がこの指定した数値より小さい場合は、行間が空き、逆に大きい場合には、行と行が重なり合って表示されます。
パーセント(相対的な数値)による指定
パーセントなど相対的な数値で行間を指定した場合、基準となる長さは「line-height」プロパティを指定した要素の文字の大きさです。
例えば、スタイルシートを設定しない状態で、文字が10ピクセルで表示された文章に150%の行間を与えた場合、行間は「10×(150-100)÷100」で、5ピクセルの間隔が空くことになります。従って、パーセントで指定した場合の初期値は「100%」になります。
CSS/HTMLサンプル
p.line { line-height:150%; }
段落要素の文字列の行間をクラス指定で文字サイズの50%にする サンプル
